8添加评论分享收藏感谢收起赞同 11 条评论分享收藏感谢收起1.html5的新特性
文件类型声明（&!DOCTYPE&）仅有一型：&!DOCTYPE HTML&。新的解析顺序：不再基于SGML。绘画用于媒介回放的 video 和 audio 元素;语意化更好的内容元素:article、footer、header、nav、表单控件:calendar、date、time、email、url、input元素的新类型：date, email, url等。新的技术: webworker, websocket, G 新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。全域属性：id, tabindex, repeat。新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。新应用程序接口:HTML GeolocationHTML Drag and DropHTML Local StorageHTML Application CacheHTML Web WorkersHTML SSEHTML Canvas/WebGLHTML Audio/Video移除的元素：纯表现的元素：basefont，big，center，font, s，strike，tt，u;对可用性产生负面影响的元素：frame，frameset，naframes；
2.什么是Retina 显示屏，带来了什么问题？
retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个 在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2//例如图片宽高为：200px*200px，那么写法如下
.css{width:100height:100background-size:100px 100}
其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px
.css{font-size:20px}
3.ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉？
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0.X就可以去除半透明灰色遮罩 a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0.X)}
4.部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2
对于按钮类还有个办法，不使用a或者input标签，直接用div标签
5.webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:}
伪元素改变number类型input框的默认样式
input[type=number]::-webkit-textfield-decoration-container {
background-color:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance:
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance:
6.webkit表单输入框placeholder的颜色值能改变么
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
7.禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}
8.禁止ios和android用户选中文字
.css{-webkit-user-select:none}
9.打电话发短信写邮件怎么实现
打电话：&a href="tel:"&打电话给:&/a& 发短信，winphone系统无效 &a href="sms:10086"&发短信给: 10086&/a& 写邮件：&a href=“mailto:"&&/a&
10.audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播
$('html').one('touchstart',function(){
audio.play()
11.闪屏怎么解决
通过transform的3d属性改去硬件加速可以解决闪屏问题开启硬件加速1）解决页面闪白2）保证动画流畅
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
12.取消input在ios下，输入的时候英文首字母的默认大写
&input autocapitalize="off" autocorrect="off" /&
13.android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
14.设计高性能CSS3动画的几个要素
尽可能地使用合成属性transform和opacity来设计CSS3动画不使用position的left和top来定位利用translate3D开启GPU加速
15.fixed bug
ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位ios4下不支持position:fixed解决方案可用isroll.js，暂无完美方案
16.移动H5前端性能优化指南
1）PC优化手段在Mobile侧同样适用
2）在Mobile侧我们提出三秒种渲染完成首屏指标
3）基于第二点，首屏加载3秒完成或使用Loading
4）基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB
5）Mobile侧因手机配置原因，除加载外渲染速度也是优化重点
6）基于第五点，要合理处理代码减少渲染损耗
7）基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置
8）加载完成后用户交互使用时也需注意性能
[加载优化]
加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点
减少HTTP请求
因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个
a) 合并CSS、JavaScript
b) 合并小图片，使用雪碧图
使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）
a) 缓存一切可缓存的资源
b) 使用长Cache（使用时间戳更新Cache）
c) 使用外联式引用CSS、JavaScript
压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip
a) 压缩（例如，多余的空格、换行符和缩进）
b) 启用GZip
写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾 部或使用异步方式加载
使用首屏加载
首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量
PS：按需加载会导致大量重绘，影响渲染性能
a) LazyLoad
b) 滚屏加载
c) 通过Media Query加载
大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失
对用户行为分析，可以在当前页加载下一页资源，提升速度
a) 可感知Loading(如进入空间游戏的Loading)
b) 不可感知的Loading（如提前加载下一页）
图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示
PS：过度压缩图片大小影响图片显示效果
a) 使用智图（
b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)
e) 选择合适的大小（1. 首次加载不大于1014KB 2. 不宽于640（基于手机屏幕一般宽度））
减少Cookie
Cookie会影响加载速度，所以静态资源域名不使用Cookie
避免重定向
重定向会影响加载速度，所以在服务器正确设置避免重定向
异步加载第三方资源
第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源
[脚本执行优化]
处理不当会阻塞页面加载、渲染，因此在使用时需当注意
CSS写在头部，JavaScript写在尾部或异步
避免图片和iFrame等的空Src
空Src会重新加载当前页面，影响速度和效率
尽量避免重设图片大小
重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能
图片尽量避免使用DataURL
DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长
* 尽量避免写在HTML标签中写Style属性
* 避免CSS表达式
CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式
* 移除空的CSS规则
空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则
* 正确使用Display的属性
Display属性会影响页面的渲染，因此请合理使用
a) display:inline后不应该再使用width、height、margin、padding以及float
b) display:inline-block后不应该再使用float
c) display:block后不应该再使用vertical-align
d) display:table-*后不应该再使用margin或者float
* 不滥用Float
Float在渲染时计算量比较大，尽量减少使用
* 不滥用Web字体
Web字体需要下载，解析，重绘当前页面，尽量减少使用
* 不声明过多的Font-size
过多的Font-size引发CSS树的效率
* 值为0时不需要任何单位
为了浏览器的兼容性和性能，值为0时不要带单位
* 标准化各种浏览器前缀
a) 无前缀应放在最后
b) CSS动画只用 （-webkit- 无前缀）两种即可
c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，所以淘汰）
* 避免让选择符看起来像正则表达式 高级选择器执行耗时长且不易读懂，避免使用
[JavaScript执行优化]
* 减少重绘和回流
a) 避免不必要的Dom操作
b) 尽量改变Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 减少drawImage
* 缓存Dom选择与计算
每次Dom选择都要计算，缓存他
* 缓存列表.length
每次.length都要计算，用一个变量保存这个值
* 尽量使用事件代理，避免批量绑定事件
* 尽量使用ID选择器
ID选择器是最快的
* TOUCH事件优化
使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引发误操作
[渲染优化]
* HTML使用Viewport
Viewport可以加速页面的渲染，请使用以下代码
&meta name=”viewport” content=”width=device-width, initial-scale=1″&
* 减少Dom节点
Dom节点太多影响页面的渲染，应尽量减少Dom节点
* 动画优化
a) 尽量使用CSS3动画
b) 合理使用requestAnimationFrame动画代替setTimeout
c) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）
* 高频事件优化
Touchmove、Scroll 事件可导致多次渲染
a) 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染
b) 增加响应变化的时间间隔，减少重绘次数
CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用（PS：过渡使用会引发手机过耗电增加）
17.CSS动画与Canvas动画性能优劣分析
a、CSS动画更为流畅、但内存占用过高，动画元素在5个以内更为推荐；
b、Canvas动画存在丢帧现象，这一现象在android中低端手机中表现更为明显；
c、5个以内动画元素，选用CSS动画，80%的设备帧频可达80以上。
18.移动端怎么自适应？
移动自适应的话一般我用的话就是rem，通过rem单位配合媒体查询来完成几个屏幕的适配，以iphone6位标准，向上适配plus，向下适配5，不做过多的适配，有时候有要求的话也用js来控制rem的大小达到适配效果，rem是相对单位，相对html元素的font-size值的属性，比如font-size:100 的话1rem就得100px，这样我子需要通过改变html的font-size就可以达到适配效果
19.如何开启gpu加速？
为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：-webkit-backface-visibility:-webkit-perspective:1000;
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围：使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。使用background-size:cover设置大尺寸背景图，并且页面可以滚动时编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)使用很多PNG图片拼接成CSS Sprite时
20.物理1像素怎么实现
可以使用after插入的形式将宽度设置为200%，然后通过css transfrom 的scale 缩放0.5倍；
21.响应式布局的原理
Meta标签定义
使用 viewport meta 标签在手机浏览器上控制布局
&meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /&
通过快捷方式打开时全屏显示
&meta name="apple-mobile-web-app-capable" content="yes" /&
隐藏状态栏
&meta name="apple-mobile-web-app-status-bar-style" content="blank" /&iPhone会将看起来像电话号码的数字添加电话连接，应当关闭&meta name="format-detection" content="telephone=no" /&使用Media Queries适配对应样式
常用于布局的CSS Media Queries有以下几种：
设备类型(media type):
all所有设备；screen 电脑显示器；print打印用纸或打印预览视图；handheld便携设备；tv电视机类型的设备；speech语意和音频盒成器；braille盲人用点字法触觉回馈设备；embossed盲文打印机；projection各种投影设备；tty使用固定密度字母栅格的媒介，比如电传打字机和终端。
设备特性(media feature):
width浏览器宽度；height浏览器高度；device-width设备屏幕分辨率的宽度值；device-height设备屏幕分辨率的高度值；orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape；aspect-ratio比例值，浏览器的纵横比；device-aspect-ratio比例值，屏幕的纵横比。
设置多种视图宽度
@media only screen and (min-width:768px)and(max-width:1024px){}
@media only screen and (width:320px)and (width:768px){}
百分比布局
宽度不固定，可以使用百分比
#head{width:100%;}
#content{width:50%;}
响应式图片
#wrap img{
max-width:100%;
一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。css3引入了新的单位叫做rem,和em类似但对于Html元素，rem更方便使用。em是相对于根元素的，需重置根元素字体大小：
html{font-size:100%;}
完成后，可以定义响应式字体：
@media (min-width:640px){body{font-size:1}}
@media (min-width:960px){body{font-size:1.2}}
@media (min-width:1200px){body{font-size:2}}
22.常见dpr
ip6 2、ip6+ 3、nexus5 3
23.移动端适配
1) 自适应方式2) viewport方式3) rem方式4) scale()方式缩放
24.常用meta
避免IE使用兼容模式 &meta http-equiv="X-UA-Compatible" content="IE=edge" /&为不支持viewport的IE Mobile设定宽度 &meta name="MobileOptimized" content="320" /&是否对手持设备友好 &meta name="HandheldFriendly" content="true" /&
强制竖屏 &meta name="screen-orientation" content="portrait" /&强制全屏 &meta name="full-screen" content="yes" /&应用模式 &meta name="browsermode" content="application" /&
强制竖屏 &meta name="x5-orientation" content="portrait" /&强制全屏 &meta name="x5-fullscreen" content="yes" /&应用模式 &meta name="x5-page-mode" content="app" /&
开启极速模式 &meta name="renderer" content="webkit" /&
iphone相关
启动webapp功能 删除工具栏和菜单栏 &meta name="apple-mobile-web-app-capable" content="yes"&控制状态栏颜色 &meta name="apple-mobile-web-app-status-bar-style" content="black" /&开启号码或邮箱检测 &meta name="format-detection" content="telephone=no" /&添加主屏幕icon &link rel="apple-touch-icon" href="touch-icon-iphone.png”&
25.html5的新api
重力感应 DeviceOrientation手机加速传感器 DeviceMotion
history 详细
以Pjax方式实现SPA history.pushState history.replaceState 解决ajax不能后退前进问题储存客户端储存：localStorage sessionStorage&只存在一个会话周期内跨域postMessage
26.你们怎么嵌套h5页面的
一般都是我前端这边开发好h5页面给安卓和ios一个地址，然后告诉他们我有哪些方法，然后在做一些安卓ios的接口调用，安卓和ios会吧他们的方法提供一个接口给我，我直接调用就好，一般都是调用一些分享，跳转之类的方法
27.webapp你主要做的是哪个模块，是页面布局做的多还是交互做的多
webapp部分基本都是我自己负责开发，页面交互都做，因为当时刚去公司的时候公司也刚往这个方向发展，让我也一直就负责移动业务这块的内容
28.bootstrap用吗？
用，bootstrap组要就是用一些他的样式组件，还有最强大的就是他的删格化系统了，做响应式的网站，我们公司的官网就是用的bootstrap做的，后台管理系统也是，当时也是我负责给我们公司的后台分享如何使用bootstrap的
10 收藏&&|&&10
干货，这段时间我也在尝试移动端和响应式，受教了
干货，这段时间我也在尝试移动端和响应式，受教了
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。Cocos 2d-JS将默认开启iOS 8 WebGL完美支持
发表于 16:06|
摘要：近日，苹果iOS 8系统的发布引来众多果粉为之疯狂，而对于手机网页游戏的开发者而言，iOS 8更带来了网页游戏开发的新潜能。在iOS 8中，Safari开始支持WebGL，相较之前性能较低的Canvas绘图模式，帧率的数倍提升将给用户带来更加流畅的游戏体验。
&&&&&&& 近日，苹果iOS 8系统的发布引来众多果粉为之疯狂，而对于手机网页游戏的开发者而言，iOS 8更带来了网页游戏开发的新潜能。在iOS 8中，Safari开始支持WebGL，相较之前性能较低的Canvas绘图模式，帧率的数倍提升将给用户带来更加流畅的游戏体验。
&&&&&& 作为开源游戏引擎Cocos 2d-x的JavaScript版本，Cocos 2d-JS 顺应开发者需求，将默认开启WebGL模式对iOS 8设备的支持。开启后游戏无需任何修改，即可直接完美支持iOS 8 ＷebGL，享受精灵、动画、粒子等全方位的渲染性能提升。
?精灵绘制& 性能飙升
& & & &当一个屏幕中容纳2600个图片精灵同时运行时，Cocos 2d-JS支持的iOS 8 WebGL性能比以往Canvas模式有显著提升，可轻易达成FPS 60满帧运行（如上图）。
&&&&&& 原Canvas绘制模式下，每秒帧率仅可达到FPS 10-15（一般而言，页面帧率低于FPS 30时用户体验已无法接受），而WebGL的出现圆满地解决了此项问题&&开发者再也不用单纯为了性能而去限制游戏中的显示元素数量。
经测试，若一个屏幕中的精灵数量进一步增加至3000个，Cocos 2d-JS支持的iOS 8 WebGL也可稳定达成FPS 55至60帧的运行性能。目前，即便是最畅销的原生商业游戏，如《刀塔传奇》，最多也只需要在同屏中运行几百个元素。
?动画性能翻番
& & & &在一个屏幕同时运行600个动画的性能测试中，Cocos 2d-JS支持的iOS 8 WebGL 带来的帧率提升也达到2倍左右。
?粒子特效& 破冰式满帧支持
&&&&&& 而针对原先在iOS Canvas中几乎无法运行、仅一两百个便卡死的炫酷粒子特效，Cocos 2d-JS 支持的iOS 8 WebGL更将带来破冰式的FPS 60满帧运行体验，运行上千个粒子毫无压力。
&&&&&& 在iPhone 5s设备上，同屏运行1800个粒子的性能测试可达到FPS 60，同屏运行2600个粒子可达到FPS 30；而在iPhone 5设备上，同屏运行1000个粒子的性能测试可达到FPS 60，同屏运行2600个粒子可达到FPS 30。这意味着开发者在游戏中甚至可以全屏使用酷炫的粒子特效，增强游戏的画面表现力。
&&&&&& 除了性能方面的巨大提升，Cocos 2d-JS的屏幕适配策略也将为开发者带来便利，完美适配iPhone 6的4.7英寸分辨率以及 屏幕。Cocos 2d-JS团队针对下一个版本v3.1，更新了示例游戏Demo《Moon Warriors》。
&（Cocos 2d-JS示例游戏《Moon Warriors》运行截图）
&&&&&& 经过提升分辨率、美化资源之后，《Moon Warriors》可顺畅地运行在iOS 8 WebGL上，绘制一帧的时间仅需0.005秒，帧率也轻松保持在FPS 60满帧，WebGL带来的前所未有的流畅度将满足用户越来越苛刻的游戏体验需求。
&& & & &据悉，Cocos 2d-JS v3.1将于10月中下旬正式发布。届时，开发者无需修改任何代码，就可以享受在iOS 8上的巨大性能提升。WebGL渲染的开启加上浏览器中JavaScript引擎性能的不断提升，未来的移动Web平台给人带来美好的想象空间。Cocos 2d-JS将与iOS 8 WebGL一起为用户提供全新的流畅体验，为开发者带来更为广阔的发挥空间。
Cocos 2d-JS快速入门：
Cocos 2d-JS中文论坛：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章评论 - 178Web开发者和设计师必须要知道的 iOS 8 十个变化 - 文章 - 伯乐在线
& Web开发者和设计师必须要知道的 iOS 8 十个变化
喜大普奔，喜极而泣，喜当爹，随着iPhone 6和iPhone 6 plus的上市，ios 8终于在上周推送更新了。新的设备，新的分辨率。接下来这篇文章介绍下 iOS 8有哪些变化。
简介 iOS 8 上的 Safari 的更新
iPhone 6 和 iPhone 6 Plus
新 Api 支持
Safari 新功能和支持
iOS 8 原生优化
Safari 插件
iOS 8上的JS
Bug 和问题
已经习惯了苹果官方的高冷，这次，苹果依旧没有更新任何与 Safari 或者 iOS 相关的文档，所以下面的所有数据和资料都是基于我自己的测试和 WWDC 上公布的信息。
iOS 8 上的 Safari
支持HTML5新APIs: WebGL (3D canvas), IndexedDB, Navigation Timing API， Crypto API
混合应用: 更快的、优化的WebView
支持滚动 Scroll 事件:终于支持了！
视频播放: 全屏API，元数据API
HTML模板元素
Safari 插件:原生App可以以插件的形式读取网页DOM
图片:支持Image Source Sets和动态PNGAPNG
CSS：支持Shapes，支持小数单位
浏览器自动填写表单（支持信用卡调用摄像头扫描）
网页和本地应用交互：登录数据共享
EcmaScript 6 ：部分支持
SPDY:支持谷歌家的新网络协议了
文件上传失效了(这是Bug)
移除了minimal-ui属性
支持Yosemite上的远程调试
相比其他移动端上的浏览器，iOS 8并没有支持有些功能：
dp单位的Media queries
getUserMedia:访问本地硬件设备，捕获音频和视频的Api
WebRTC:网页即时通信
@viewport 声明
iPhone 6 和 iPhone6 Plus
iPhone 6 和 iPhone6 Plus 是苹果继 iPhone 5 后的又一款不同尺寸和不同分辨率的设备。iPhone 6 的参数为4.7寸大小和750×1334物理分辨率的屏幕（dpi 值与iphone 5s 相同），iPhone 6 Plus则是5.5寸和分辨率(401 dpi)的屏幕。不走寻常路的苹果给这两分辨率取名叫Retina HD屏，嗯哼，比Retina多了一个HD。
对于web开发者来说，不同的不仅仅是尺子上的大小。还包括默认viewport（关乎width=device-width的设置），像素比（关乎高清图片的应用），icon图标大小和登录页的图片大小。
iPhone 6 Plus
Viewport’s device-width (in CSS pixels)
Viewport’s device-width (Android设备同分辨率参考)
Device Pixel Ratio 像素比
Rendered Pixels 渲染像素 (默认 viewport size * dpr)
Physical pixels 物理像素
对于新 iPhone 的屏幕尺寸，推荐一篇文章 。
VIEWPORT SIZE
正在读这篇文章的你应该已经知道
直到上周，所有的 iPhone 和 iPod 使用的都是320px的屏幕宽度。iPhone 6 和 Plus 相比前代更加宽，给我们带来了更多的空间，苹果终于决定加宽浏览器宽度了。但是苹果奇葩的是使用了一套特殊的屏幕像素值。大部分4.7~5寸的安卓设备的viewport宽设为360px，iPhone 6上却是375px，大部分5.5寸安卓机器（比如说三星Note）的viewport宽为400，iPhone 6 plus 上却是十分怪异的414px （╮(╯_╰)╭ 苹果你这样折腾是闹哪样啊）。这意味着相比同样尺寸的安卓机器，iPhone 6用户大概要少看4%的内容。也许这并不是什么大问题，但是你也许还是得检查下你的网站是否适配。
适配新iPhone，你可以使用下面两段&meta&
&meta name=&viewport& content=&width=375&&
&meta name=&viewport& content=&width=414&&
<meta name="viewport" content="width=375"><meta name="viewport" content="width=414">
设备像素比
iPhone 6与 iphone 5一样，像素比都是2，但是另一方面 iPhone 6 401的dpi真实的像素比值应该大约是2.60。为了解决这个问题，苹果又整了个新概念rendered pixels 渲染像素，如果像素比是3x,那么理论上一个css宽设为414px的屏幕应该拥有1242px的物理像素（现实中是1080px，小了13%）。
因此，如果你使用一个3x的图给高清的安卓设备，同样这样图也会适配 iPhone 6 Plus 但是iPhone 的浏览器在渲染在屏幕之前首先会调整图片大小。
iOS特有的图标大小，在 iPhone 6 plus上是180×180，iPhone 6 上则还是老的120×120。
适配iPhone 6 plus，则需要在中加上这段
&link rel=&apple-touch-icon-precomposed& sizes=&180x180& href=&retinahd_icon.png&&
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
如果你的webapp有一个启动图，那么你又得增加两行代码适配新 iPhone 了。
iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是 。
&link rel=&apple-touch-startup-image& href=&launch6.png& media=&(device-width: 375px)&&
&link rel=&apple-touch-startup-image& href=&launch6plus.png& media=&(device-width: 414px)&&
<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"><link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">
目前位置，所有升级到iOS 8的 iPhone都使用同样的UserAgent，所以我们暂时还没有办法在服务端判断这是什么设备，当然，通过JS和Media Queries我们还是可以通过技巧来判断的。
两个最重要的Api支持终于登录了iOS,分别是WebGL和IndexedDB，与此同时，Safari也开始支持和。
WebGL支持3D模拟，并且是浏览器默认开启。对于游戏开发者来说，这是一个好消息，更加丰富的交互和形式将在网页上出现。
你可以在微软的这个测试下 iOS 8 Safarai上进行3D渲染的效果。
IndexdDB是W3C继起用WebSQL后推出的新的标准，随着 iOS支持 IndexedDB，我们能在不同的手机浏览器上使用同一套数据库API。
Navigation Timing API对于web性能优化来说是个好消息。通过这个API我们能过测量更加精准的加载渲染时间，优化网页的用户体验。
Safari新功能
iPhone处于横屏的时候,iPad（横竖均可），如果你用手指捏放屏幕（比如说你想放大网页），你会进入一个标签预览模式，用起来倒是挺方面，可是可能会与你在网页上使用的gesturechange事件所冲突，如果你要使用自定义缩放事件，首先爱你你得event.preventDefault()来阻止浏览器的默认事件。
取消 MINIMAL-UI
六个月前，苹果推出了了，iOS 8更新后则又取消了这个，依旧高冷女神范，没说为什么。
表单自动填写和信用卡扫描功能
Safari如今支持自动补全表单，并且当Safari检测到你要填写的是信用卡的时候他会允许你开启摄像头直接扫描实体信用卡。
于此同时，Safari也支持autocomplete属性，参考。这意味着如果你在一个登录页面，Safari可以调用Keychain里的数据自动填写用户名帐号、密码。Luis Abreu写过一篇关于iOS 8安全和隐私相关的文章，推荐可以
如果你的网站提供了RSS订阅，iOS 8用户可以直接在浏览你网页的时候在书签栏打开他。就是那个@图标里面有个订阅的按钮，虽说有点小低调，但好歹还是有嘛 ?( ? ▽ ` )?。
现在地址栏和工具栏就变成半透明了。在 iOS 7上只有地址栏是半透明的。这意味着初次加载的时候网页可视区域变得更大（包含了底部的工具栏）。
iPad上的更新
iOS 7以后，使用iPhone上的Safari浏览网页，滚动的时候会自动隐藏工具栏（ipad不会），iOS 8 ipad也有了这个细节上的变化（横竖都有）。不同的是，在横向模式的时候，iPad上面还有一小条，iPhone则是全屏。
除此之外，Safari在横屏模式开启侧边栏会保持原有的viewport大小，只会改变aspect-ratio
书签icon和常用网站
Safari终于支持收藏夹里和书签里的网页附带网站的icon图标。当你在地址栏输入关键字搜索的时候，同样会展示网站的icon（ipad刚刚我测试了下没有）。
跨平台切换
如果你同时使用Mac和iPhone，当你在iPhone上浏览一个网页，你可以在你的Mac上（需要Yosemite）继续阅读（今年WWDC上专门演示了这个功能，还得等到Yosemite的正式更新）。
更像native的webapp
如果你想让用户在网页上，无经确定，就直接跳转到Apple Store下载你的应用，那是不可能的。想让网页与本地应有之间有交互，iOS 8带来更多的便捷性。
Safari插件
共用认证（web和本地应用之间能共用安全凭证，无需再重新登录）。
新的webview
这次iOS 8更新，最令人激动的消息就是混合应用与 Mac 上共同了一套 API，意味着iOS 上也能有更多的功能，Mac 和 iOS的通信交互，还有：
支持JavaScript与本地应用之间通过postMessage的交互
New classes configure the Web View similar to the power we have on Android’s Web View.（这段谁能翻译下）
更强大的 Nitro引擎，相比前代4x速度的js执行速度。
新的 webview(WKWebkit)是新框架(WebKit.framework)的一部分，与老的UIWebView并不是完全兼容。但是老的webviwe依旧保留，所以老的webapp还是会使用老的webview。
目前的GM版本（公开版也是一样的）依旧存在本地文件无法上传的bug，对于一些混合应用（例如Cordova PhoneGap）来说，这（多webviwe）算是个好消息。
这就意味着，目前 iOS 8，拥有4个web引擎，当然，也意味着兼容性和bug都是有差异的。 1. Safari
2. Web.app (使用full-screen 桌面应用)
3. UIWebView (老)
4. WKWebView（新）
你可以在这里测试下你webapp的性能。
对于那种包壳应用和webviewe应用来说，这个变化是十分重要的。比如说iOS上的Chrome和Facebook本地应用中的网页应用（我们猎豹的电池医生、手机猎豹也大量应用webview）。根据一份报告，11.5%的iOS流量是来自基于webview的应用。
Safari 插件
iOS 8上的Safar 是第一个支持插件和拓展的系统预装浏览器（Firefox OS也许也算是一个）。从iOS 8开始，本地应用可以拓展到与 Safari 交互，主要通过两种方式：分享(Share extension)和动作(Actions)。Action 可以与DOM交互，意味着可以本地应用可以直接修改DOM元素。
所有的插件都需要用户主动选择来触发（需要点击分享中不同的按钮来触发），暂时还没有可以自动运行的插件。
旧版 Safari 的分享 菜单同样被基于 JavaScript 的插件所替代。比如说添加到桌面如今就是一段 Safari 中的 js 代码。
除了苹果在WWDC上演示的功能，Safari的这个改进意味着浏览网页会有极大的体验改善。比如说你可以在Safari直接调用1Password或者LastPassword 保存的帐号密码登录，如果你的iPhone 有 Touch ID指纹识别，你甚至可以直接指纹验证登录。
Pocket.com 已经声明即将推出针对 iOS 8的插件。
前端和设计师的福利
这次safari新增了很多html5，css3的支持
CSS Shapes
CSS object-fit
CSS Background Blend modes
word-spacing
CSS Compositing and Blending
Subpixel layout 支持小数点
Animated PNG supported APNG格式图片
Parallax effects and Pull-to-refresh supported （与Scroll事件相关）
SVG Fragments Identifiers (for SVG Sprites)
Image Source Set support
HTML Template support
Animated PNG
是PNG位图动画的拓展，但未获得PNG组织官方的认可，与GIF有点类似（只不过GIF是基于JPG的），这意味着我们可以制作32位全彩半透明的动态图。
滚动时差与下拉刷新
如果你做过移动端的项目，你一定知道iOS7以及以前都不支持scrooll事件，iOS 8 终于支持滚动事件，这下大家终于可以在iOS上用到视觉滚差相关的js和css了，但是不保证完全适配。
这个支持让我们可以做出下拉刷新和无限下拉下载的效果。
小数点单位
Safari现在CSS单位从整数转成了浮点数。这意味着CSS对象模型中诸如offsetTop和ClientWidth可能会取得小数值，之前老的iOS都会返回整数值。
与此同时，这也意味着你可以用半个像素单位了。
border-width: 0.5
div {&&&& border-width: 0.5px;}
SVG 片段标识
SVG没怎么玩过，这个属性也不懂，大家先看英文吧。
Fragment identifiers from SVG is a method to link to one specific fragment or portion of an SVG instead of the root element. This feature allow us to sprite SVG images in one file taking advantage of one HTTP request and caching. Similar to CSS Sprites, but with SVG images instead and with ids instead of positions.
CSS 合成和变形
利用mix-blend-mode这个新属性支持我们把不同形状的不同元素合成到一张图片，这是Adobe在HTML5方面新出的一个功能。在他们的上你能看到演示的DEMO和文档。
从Adobe官网的例子演示来看，似乎变形是生效了，合成并没有生效（我Mac Chrome也没生效）。
CSS 形状也是Adobe新出的一个特性。对于这个特性，推荐下W3Cplus上的。个人还是很看好这个特性的推广和应用的，能给我们的网页设计带来更多的可能性。
Image Source Set
有了解响应式图片的开发者对这个应该不陌生，随着高清屏的普及，针对不同的分辨率做适配是一个需要注意的问题，苹果iOS 8 支持Image Source Set Spec，意味着可以在&img&标签中使用新的属性。
&img src=&lores.png& srcset=&hires.png 2x, superhires.png 3x&&
<img src="lores.png" srcset="hires.png 2x, superhires.png 3x">
在上面这段代码的例子中，iPhone 6 Plus 的像素比是3x，它会加载superhires.png这张图片，而iPhone 5s,iPhone 6 则会加载hires.png这种图，其余的则加载lores.png。但是遗憾的是，iOS 暂时还不支持&picture&元素。
&template&对于webapp来说十分有用，&template&中可以包含一段css或者js（不会被浏览器解析），实际应用中，我们可以利用&template&中的代码创建一个新的node。
这次更新对视频播放相关的增强了许多，iOS8开始支持全屏播放,Meta Data Api和CSS layering(话说大家知道HTML5 Video元素是可以通过CSS来控制吧？)
video元素的全屏播放
Safari不支持全屏播放API，即使是iOS8也不例外。但是能通过一个特殊的方法解决这个问题，在&video&元素中增加一段js。
&input type=&button& value=&Go Full screen&
onclick='document.querySelector(&video&).webkitEnterFullScreen()'&
<input type="button" value="Go Full screen"&&onclick='document.querySelector(&video&).webkitEnterFullScreen()'&
视频 Metadata API
Safari开始支持&video&的preload="metadata"，可以让浏览器触发loadedmetadata事件方便开发者控制。
我可以通过css控制其他元素放在&video&之前。
iOS 8 JavaScript相关
部分支持ECMAScript 6,包括Promises, Iterators, Maps, For-of, Weak Maps等等。
后台运行：JavaScript会在后台继续运行（哪怕已经切换了窗口甚至Safari切换到后台，但是计时器 times 下降到1s的频率）。
支持scroll事件：不多说了，上面介绍过。
Unprefixed Page Visibility AP ： 我没搞懂这个是什么（哪位知道求指导）
移除window.doNotTrack
支持window.currentScript
9月18更新:
有开发者发现：iPhone 5上的click事件300ms延迟已经取消了（只是Safari），但是其他设备上的Safari和 WebViews 上还有，延迟依旧在 iPod touch, iPads 和iPhone 5s上。
Bug和存在的问题
说了iOS8和iPhone 的更新，再来说说目前发现的 Bug。
不支持文件上传！！！所有的文件上传都失效了，你能选择或者拍张照片，但是js不能获得任何数据。HTML或者XMLHttpRequest的POST请求也不行。但是这个问题但是在桌面启动的app没发生。
WKWebKit：在新的引擎不能读取本地文件是个大问题，所以对于混合app来说，还得使用老的UIWebView。
window.prompt可能会导致Safari崩溃
附件:语音在input和labels输入时，不管用。(当输入的时候，label不再发音)
桌面app的iframes中,touch事件没有被监测到。
手机休眠后，桌面app中的Timers和requestAnimationFrame回调没有执行。
iOS 8给web前端带来的变化还是很令人欣喜的，更强大的性能，更强大的浏览器和内核，更开放的接口，可以预见在针对iOS的web应用会有一个更大的用武之地。
文章很长，大量技术词汇，翻译了半天，若译文有错误或者不妥之处，欢迎指正和提供建议。