浏览媒介
桌面端
系统: Window Mac
浏览器: IE Edge Safari Chrome Firefox QQ 360(极速) 搜狗 Opera …
移动端
系统: iOS Android WinPhone
浏览器: Android系统浏览器 Safari Chrome UC QQ(微信) …
浏览器内核
渲染引擎 + JavaScript引擎
- Trident [ˈtraɪdnt] (IE): 因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。
- Gecko [ˈgekəʊ] (Firefox): 优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。
- Webkit (Safari、Chrome、Android浏览器): 优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。
Presto [ˈprestəʊ] (Opera)：Presto内核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。
双核 (360浏览器、QQ浏览器)
IE
浏览器模式 & 文档模式
Browser Mode & Document Mode
- 浏览器模式 用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理（User-Agent）字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能，可以向不同的浏览器返回不同的页面内容。
- 文档模式 用于指定IE的页面排版引擎以哪个版本来解析并渲染网页代码。切换文档模式会导致网页被刷新，但不会改变用户代理字符串的版本号，也不会从服务器重新下载网页。
- 怪异模式(Quirks Mode) 为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。
X-UA-Compatible 在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，所以使用X-UA-Compatible标签强制IE8采用低版本方式渲染。 例如
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />怪异模式（Quirks Mode）对 HTML 页面的影响
借助HTML分别禁用IE8, IE9的兼容视图模式（Compatibility View）演示时间
360安全(极速)浏览器
- 国内的主流浏览器都是双核浏览器：基于Webkit的内核用于常用网站的高速浏览，基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。
内核控制标签
<meta name="renderer" content="webkit">
手动切换网站的内核模式后，该meta标签将失效演示时间
桌面端 vs 移动端
| 特性 | 桌面端 | 移动端 |
|---|---|---|
| 系统 | Window、Mac OS | iOS、Android（机型较多） |
| 内容 | 多 | 精简 |
| 场景 | 时间段、地点相对固定、持续化 | 随时随地、碎片化 |
| 网络 | 宽带、稳定 | 4G、3G、网络环境多变 |
| 交互 | 方式: 鼠标 键盘 主要事件: click hover | 方式: 触屏、手势、传感器 主要事件: touch** |
| 布局 | 复杂 单位: px | 精简、响应式 单位: rem vw |
移动端点击300ms延迟问题和解决
基于vw等viewport视区单位配合rem响应式排版和布局
vw兼容情况
开发要点
常用Meta标签总结
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- **IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame** ( Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页，因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术 )。 --> <meta name="renderer" content="webkit" /> <!-- 请求使用webkit内核渲染 --> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <!-- width: 正整数或device-width 定义视口的宽度，单位为像素 height: 正整数或device-height 定义视口的高度，单位为像素 initial-scale: [0.0-10.0] 定义初始缩放值 minimum-scale: [0.0-10.0] 定义缩小最小比例，它必须小于或等于maximum-scale设置 maximum-scale: [0.0-10.0] 定义放大最大比例，它必须大于或等于minimum-scale设置 user-scalable: yes/no 定义是否允许用户手动缩放页面，默认值yes --> <meta name="format-detection" content="telephone=no,email=no"/> <!-- 关闭电话、邮箱自动识别 --> <meta name="apple-mobile-web-app-capable" content="yes"/> <!-- WebApp全屏模式 --> <meta name="apple-mobile-web-app-title" content="标题"/> <!-- 添加到主屏幕的标题 --> <link href="图片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/> <!-- 添加到主屏幕的图标 --> <meta name="x5-orientation" content="portrait|landscape"/> <!-- QQ浏览器(X5内核) 设置屏幕方向--> <meta name="x5-fullscreen" content="true"/> <!-- QQ浏览器(X5内核) 设置全屏 --> <meta name="screen-orientation" content="portrait|landscape"/> <!-- UC浏览器设置屏幕方向 --> <meta name="full-screen" content="true"/> <!-- UC浏览器设置全屏 --> <meta name="viewport" content="uc-fitscreen=no|yes"/> <!-- UC浏览器缩放不出现滚动条 --> <meta name="nightmode" content="enable|disable"/> <!-- UC浏览器夜间模式 -->Hack [hæk]
HTML头部
针对所有IE：<!--[if IE]>....<![endif]--> 针对IE9及以下版本：<!--[if lt IE 9]>....<![endif]--> // html兼容ie的写法 <!DOCTYPE html> <!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]--> <!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]--> <!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html lang="zh-cn"><!--<![endif]-->类内属性前缀或选择器前缀
2320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
