常用浏览器兼容以及设备兼容方法

最新推荐文章于 2025-10-09 11:57:48 发布

原创最新推荐文章于 2025-10-09 11:57:48 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

前端技术专栏收录该内容

7 篇文章

订阅专栏

本文介绍了浏览器兼容性问题，包括主流浏览器的内核、DOCTYPE的使用，以及HTML5、HTML4.01等不同文档类型。此外，还探讨了移动端的Hybrid App开发，包括其类型、优缺点，以及WebView和viewport的运用，为移动端适配提供了指导。

浏览器兼容

主流浏览器的内核

浏览器内核主要指的是浏览器的渲染引擎，渲染引擎决定了浏览器如何加载和显示网页的内容以及信息。我们主要用于测试的浏览器都有：IE、Chrome、Firefox、Safari、Opera、360浏览器。

IE：trident内核（IE内核）
Firefox：geoko内核，Mozilla自己开发的一套开放源代码、以C++编写的渲染引擎。
Safari：webkit内核，开源的浏览器引擎，源自于Linux平台上的一个引擎，经过Apple公司的修改可以支持Mac与Windows平台。
Chrome：Blink内核，Google和Opera Software共同研发。
Opera：以前是presto内核，现在改为Blink内核。
360浏览器：兼容模式（trident内核）、极速模式（Blink内核）。

Chrome浏览器基于开源引擎WebKit中WebCore元件的一个分支--Blink，也就是说Blink只是Webkit的一个分支。

文档类型

常用的 DOCTYPE 声明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

什么是DTD？

DTD：Document Type Definition，中文翻译为：文档类型定义。DTD可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。因为早期的版本基于SGML，所以需要套用SGML的解析规则。DTD的作用在于定义SGML文档的文档类型以便于浏览器解析。

随着技术的进步，现在HTML5 不基于 SGML，所以也就不需要引用 DTD了。

如果没有<!DOCTYPE>声明，那么不同的浏览器将会以自己不同的怪异的模式去解析渲染页面，这样页面在不同的浏览器上呈现出来的效果也就不一样，人们把这称之为“怪异模式”。

但是如果声明了，将会开启“严格模式”，又有人称之为“标准模式”，浏览器将已w3c标准来解析渲染页面。

meta标签

定义

常用meta

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name=”renderer” content=”webkit”> 
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   
<!-- 页面关键词，让自己的网站更好的被搜索到 -->
<meta name=”keywords” content=””/>    
<!-- 声明文档使用的字符编码 -->
<meta charset=’utf-8′>   
<!-- 避免IE使用兼容模式 -->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     
<!-- 为移动设备添加 viewport -->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”>

扩展meta

<!-- 标准的 lang 属性写法 -->
<head lang=”en”>
<!-- 页面描述 -->
<meta name=”description” content=”不超过150个字符”/>
<!-- 网页作者 -->
<meta name=”author” content=”name, email@gmail.com”/>
<!-- 搜索引擎抓取 -->
<meta name=”robots” content=”index,follow”/>
<!-- iOS 设备 begin -->
<meta name=”apple-mobile-web-app-title” content=”标题”>
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name=”apple-mobile-web-app-capable” content=”yes”/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<!-- 设置苹果工具栏颜色 -->
<meta name=”format-detection” content=”telphone=no, email=no”/>
<!-- 不让百度转码 -->
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name=”HandheldFriendly” content=”true”>
<!-- 微软的老式浏览器 -->
<meta name=”MobileOptimized” content=”320″>
<!-- uc强制竖屏 -->
<meta name=”screen-orientation” content=”portrait”>
<!-- QQ强制竖屏 -->
<meta name=”x5-orientation” content=”portrait”>
<!-- UC强制全屏 -->
<meta name=”full-screen” content=”yes”>
<!-- QQ强制全屏 -->
<meta name=”x5-fullscreen” content=”true”>
<!-- UC应用模式 -->
<meta name=”browsermode” content=”application”>
<!-- QQ应用模式 -->
<meta name=”x5-page-mode” content=”app”>
<!-- windows phone 点击无高光 -->
<meta name=”msapplication-tap-highlight” content=”no”>

移动端兼容

什么是Hybrid App？

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

Hybrid类型

多View混合型：native view和web view独立展示，交替出现。其应用主体通常是native app，web技术作为补充。即在需要的时候，将web view作为独立的view运行，在web view内完成相关的展示操作。开发难度与native app相当。举个栗子：Instagram的timeline使用的是web view。
单View混合型：在同一个view内，native view和web view为层叠关系，同时出现。开发成本较高，难度较大，但是体验较好。举个栗子：百度搜索同时实现充分的灵活性和较好的用户体验。
Web主体型：应用主体是web view，穿插native功能，主要以网页语言编写。整体开发难度低，基本可以实现跨平台；而用户体验好坏，主要取决于底层中间件的交互与跨平台能力。举个栗子：项目管理工具 Basecamp使用web view呈现内容，调用系统原生API实现界面导航等功能来提高用户体验。

混合开发利弊

Hybrid app也并非是完美的解决方案。由于其使用HTML5，某些依赖于复杂的原生功能或者繁重的过渡动画的应用会出现卡顿；同时，为了模拟native app的UI和感官，需要投入额外的时间和精力；尽管可以跨平台，但是并不能完全支持所有的设备和操作系统；最后，如果应用的体验不够原生化，如一个简单的网站，则还有被Apple App Store拒绝的风险。

WebView

不管是ios还是安卓，自带浏览器底层都是基于webkit的，然后各自系统中均带有webview控件，也是基于webkit引擎，所以不管通过APP调用webview展示html页面还是通过在浏览器打开html页面，效果是一样的。

viewport

<meta charset="utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签，允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签，iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email识别-->
<meta content="email=no" name="format-detection">

禁止复制、选中文本

.el {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

给不同屏幕大小的手机设置特殊样式

@media only screen and (min-device-width : 320px) and (max-device-width : 375px){ ... }