{"id":2433,"date":"2014-09-26T09:03:02","date_gmt":"2014-09-26T01:03:02","guid":{"rendered":"http:\/\/13tech.com.cn\/?p=2433"},"modified":"2014-09-26T09:12:04","modified_gmt":"2014-09-26T01:12:04","slug":"web%e5%bc%80%e5%8f%91%e8%80%85%e5%92%8c%e8%ae%be%e8%ae%a1%e5%b8%88%e5%bf%85%e9%a1%bb%e8%a6%81%e7%9f%a5%e9%81%93%e7%9a%84-ios-8-%e5%8d%81%e4%b8%aa%e5%8f%98%e5%8c%96","status":"publish","type":"post","link":"https:\/\/www.uxren.cn\/?p=2433","title":{"rendered":"Web\u5f00\u53d1\u8005\u548c\u8bbe\u8ba1\u5e08\u5fc5\u987b\u8981\u77e5\u9053\u7684 iOS 8 \u5341\u4e2a\u53d8\u5316"},"content":{"rendered":"<p><a href=\"http:\/\/13tech.com.cn\/wp-content\/uploads\/2014\/09\/downgrade-ios-8-2.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2435\" alt=\"downgrade-ios-8-2\" src=\"http:\/\/13tech.com.cn\/wp-content\/uploads\/2014\/09\/downgrade-ios-8-2.jpg\" width=\"950\" height=\"550\" srcset=\"https:\/\/www.uxren.cn\/wp-content\/uploads\/2014\/09\/downgrade-ios-8-2.jpg 950w, https:\/\/www.uxren.cn\/wp-content\/uploads\/2014\/09\/downgrade-ios-8-2-300x173.jpg 300w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/a><\/p>\n<p>\u559c\u5927\u666e\u5954\uff0c\u559c\u6781\u800c\u6ce3\uff0c\u559c\u5f53\u7239\uff0c\u968f\u7740iPhone 6\u548ciPhone 6 plus\u7684\u4e0a\u5e02\uff0cios 8\u7ec8\u4e8e\u5728\u4e0a\u5468\u63a8\u9001\u66f4\u65b0\u4e86\u3002\u65b0\u7684\u8bbe\u5907\uff0c\u65b0\u7684\u5206\u8fa8\u7387\u3002\u63a5\u4e0b\u6765\u8fd9\u7bc7\u6587\u7ae0\u4ecb\u7ecd\u4e0b iOS 8\u6709\u54ea\u4e9b\u53d8\u5316\u3002<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>\u4e00\u3001\u6982\u8ff0<\/strong><\/h4>\n<ul>\n<li>\u7b80\u4ecb iOS 8 \u4e0a\u7684 Safari \u7684\u66f4\u65b0<\/li>\n<li>iPhone 6 \u548c iPhone 6 Plus<\/li>\n<li>\u65b0 Api \u652f\u6301<\/li>\n<li>Safari \u65b0\u529f\u80fd\u548c\u652f\u6301<\/li>\n<li>iOS 8 \u539f\u751f\u4f18\u5316<\/li>\n<li>Safari \u63d2\u4ef6<\/li>\n<li>\u65b0\u7684\u8bbe\u8ba1<\/li>\n<li>\u89c6\u9891\u589e\u5f3a<\/li>\n<li>iOS 8\u4e0a\u7684JS<\/li>\n<li>Bug \u548c\u95ee\u9898<\/li>\n<\/ul>\n<p>\u5df2\u7ecf\u4e60\u60ef\u4e86\u82f9\u679c\u5b98\u65b9\u7684\u9ad8\u51b7\uff0c\u8fd9\u6b21\uff0c\u82f9\u679c\u4f9d\u65e7\u6ca1\u6709\u66f4\u65b0\u4efb\u4f55\u4e0e Safari \u6216\u8005 iOS \u76f8\u5173\u7684\u6587\u6863\uff0c\u6240\u4ee5\u4e0b\u9762\u7684\u6240\u6709\u6570\u636e\u548c\u8d44\u6599\u90fd\u662f\u57fa\u4e8e\u6211\u81ea\u5df1\u7684\u6d4b\u8bd5\u548c WWDC \u4e0a\u516c\u5e03\u7684\u4fe1\u606f\u3002<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>\u4e8c\u3001iOS 8 \u4e0a\u7684 Safari<\/strong><\/h4>\n<ul>\n<li>\u652f\u6301HTML5\u65b0APIs: WebGL (3D canvas), IndexedDB, Navigation Timing API\uff0c Crypto API<\/li>\n<li>\u6df7\u5408\u5e94\u7528: \u66f4\u5feb\u7684\u3001\u4f18\u5316\u7684WebView<\/li>\n<li>\u652f\u6301\u6eda\u52a8 Scroll \u4e8b\u4ef6:\u7ec8\u4e8e\u652f\u6301\u4e86\uff01<\/li>\n<li>\u89c6\u9891\u64ad\u653e: \u5168\u5c4fAPI\uff0c\u5143\u6570\u636eAPI<\/li>\n<li>HTML\u6a21\u677f\u5143\u7d20<\/li>\n<li>Safari \u63d2\u4ef6:\u539f\u751fApp\u53ef\u4ee5\u4ee5\u63d2\u4ef6\u7684\u5f62\u5f0f\u8bfb\u53d6\u7f51\u9875DOM<\/li>\n<li>\u56fe\u7247:\u652f\u6301Image Source Sets\u548c\u52a8\u6001PNGAPNG<\/li>\n<li>CSS\uff1a\u652f\u6301Shapes\uff0c\u652f\u6301\u5c0f\u6570\u5355\u4f4d<\/li>\n<li>\u6d4f\u89c8\u5668\u81ea\u52a8\u586b\u5199\u8868\u5355\uff08\u652f\u6301\u4fe1\u7528\u5361\u8c03\u7528\u6444\u50cf\u5934\u626b\u63cf\uff09<\/li>\n<li>\u7f51\u9875\u548c\u672c\u5730\u5e94\u7528\u4ea4\u4e92\uff1a\u767b\u5f55\u6570\u636e\u5171\u4eab<\/li>\n<li>EcmaScript 6 \uff1a\u90e8\u5206\u652f\u6301<\/li>\n<li>SPDY:\u652f\u6301\u8c37\u6b4c\u5bb6\u7684\u65b0\u7f51\u7edc\u534f\u8bae\u4e86<\/li>\n<li>\u6587\u4ef6\u4e0a\u4f20\u5931\u6548\u4e86(\u8fd9\u662fBug)<\/li>\n<li>\u79fb\u9664\u4e86minimal-ui\u5c5e\u6027<\/li>\n<li>\u652f\u6301Yosemite\u4e0a\u7684\u8fdc\u7a0b\u8c03\u8bd5<\/li>\n<\/ul>\n<p>\u76f8\u6bd4\u5176\u4ed6\u79fb\u52a8\u7aef\u4e0a\u7684\u6d4f\u89c8\u5668\uff0ciOS 8\u5e76\u6ca1\u6709\u652f\u6301\u6709\u4e9b\u529f\u80fd\uff1a<\/p>\n<ul>\n<li>dp\u5355\u4f4d\u7684Media queries<\/li>\n<li>getUserMedia:\u8bbf\u95ee\u672c\u5730\u786c\u4ef6\u8bbe\u5907\uff0c\u6355\u83b7\u97f3\u9891\u548c\u89c6\u9891\u7684Api<\/li>\n<li>WebRTC:\u7f51\u9875\u5373\u65f6\u901a\u4fe1<\/li>\n<li>@viewport \u58f0\u660e<\/li>\n<li>Datalist<\/li>\n<li>WebP\u56fe\u7247<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4><strong>\u4e09\u3001iPhone 6 \u548c iPhone6 Plus<\/strong><\/h4>\n<p>iPhone 6 \u548c iPhone6 Plus \u662f\u82f9\u679c\u7ee7 iPhone 5 \u540e\u7684\u53c8\u4e00\u6b3e\u4e0d\u540c\u5c3a\u5bf8\u548c\u4e0d\u540c\u5206\u8fa8\u7387\u7684\u8bbe\u5907\u3002iPhone 6 \u7684\u53c2\u6570\u4e3a4.7\u5bf8\u5927\u5c0f\u548c750\u00d71334\u7269\u7406\u5206\u8fa8\u7387\u7684\u5c4f\u5e55\uff08dpi \u503c\u4e0eiphone 5s \u76f8\u540c\uff09\uff0ciPhone 6 Plus\u5219\u662f5.5\u5bf8\u548c1080\u00d71920\u5206\u8fa8\u7387(401 dpi)\u7684\u5c4f\u5e55\u3002\u4e0d\u8d70\u5bfb\u5e38\u8def\u7684\u82f9\u679c\u7ed9\u8fd9\u4e24\u5206\u8fa8\u7387\u53d6\u540d\u53ebRetina HD\u5c4f\uff0c\u55ef\u54fc\uff0c\u6bd4Retina\u591a\u4e86\u4e00\u4e2aHD\u3002<\/p>\n<p>\u5bf9\u4e8eweb\u5f00\u53d1\u8005\u6765\u8bf4\uff0c\u4e0d\u540c\u7684\u4e0d\u4ec5\u4ec5\u662f\u5c3a\u5b50\u4e0a\u7684\u5927\u5c0f\u3002\u8fd8\u5305\u62ec\u9ed8\u8ba4viewport\uff08\u5173\u4e4e width=device-width\u7684\u8bbe\u7f6e\uff09\uff0c\u50cf\u7d20\u6bd4\uff08\u5173\u4e4e\u9ad8\u6e05\u56fe\u7247\u7684\u5e94\u7528\uff09\uff0cicon\u56fe\u6807\u5927\u5c0f\u548c\u767b\u5f55\u9875\u7684\u56fe\u7247\u5927\u5c0f\u3002<\/p>\n<p><a href=\"http:\/\/13tech.com.cn\/wp-content\/uploads\/2014\/09\/2344-01.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2434\" alt=\"2344-01\" src=\"http:\/\/13tech.com.cn\/wp-content\/uploads\/2014\/09\/2344-01.png\" width=\"664\" height=\"259\" srcset=\"https:\/\/www.uxren.cn\/wp-content\/uploads\/2014\/09\/2344-01.png 664w, https:\/\/www.uxren.cn\/wp-content\/uploads\/2014\/09\/2344-01-300x117.png 300w\" sizes=\"(max-width: 664px) 100vw, 664px\" \/><\/a><\/p>\n<p>\u5bf9\u4e8e\u65b0 iPhone \u7684\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u63a8\u8350\u4e00\u7bc7\u6587\u7ae0&#8221;<a href=\"http:\/\/www.paintcodeapp.com\/news\/iphone-6-screens-demystified\" target=\"_blank\">iPhone 6 Screens Demystified<\/a>&#8221; \u3002<\/p>\n<p>&nbsp;<\/p>\n<h5><strong>3.1 VIEWPORT SIZE<\/strong><\/h5>\n<p>\u6b63\u5728\u8bfb\u8fd9\u7bc7\u6587\u7ae0\u7684\u4f60\u5e94\u8be5\u5df2\u7ecf\u77e5\u9053\uff1a<\/p>\n<p>\u76f4\u5230\u4e0a\u5468\uff0c\u6240\u6709\u7684 iPhone \u548c iPod \u4f7f\u7528\u7684\u90fd\u662f320px\u7684\u5c4f\u5e55\u5bbd\u5ea6\u3002iPhone 6 \u548c Plus \u76f8\u6bd4\u524d\u4ee3\u66f4\u52a0\u5bbd\uff0c\u7ed9\u6211\u4eec\u5e26\u6765\u4e86\u66f4\u591a\u7684\u7a7a\u95f4\uff0c\u82f9\u679c\u7ec8\u4e8e\u51b3\u5b9a\u52a0\u5bbd\u6d4f\u89c8\u5668\u5bbd\u5ea6\u4e86\u3002\u4f46\u662f\u82f9\u679c\u5947\u8469\u7684\u662f\u4f7f\u7528\u4e86\u4e00\u5957\u7279\u6b8a\u7684\u5c4f\u5e55\u50cf\u7d20\u503c\u3002\u5927\u90e8\u52064.7~5\u5bf8\u7684\u5b89\u5353\u8bbe\u5907\u7684viewport\u5bbd\u8bbe\u4e3a360px\uff0ciPhone 6\u4e0a\u5374\u662f375px\uff0c\u5927\u90e8\u52065.5\u5bf8\u5b89\u5353\u673a\u5668\uff08\u6bd4\u5982\u8bf4\u4e09\u661fNote\uff09\u7684viewport\u5bbd\u4e3a400\uff0ciPhone 6 plus \u4e0a\u5374\u662f\u5341\u5206\u602a\u5f02\u7684414px \uff08\u256e(\u256f_\u2570)\u256d \u82f9\u679c\u4f60\u8fd9\u6837\u6298\u817e\u662f\u95f9\u54ea\u6837\u554a\uff09\u3002\u8fd9\u610f\u5473\u7740\u76f8\u6bd4\u540c\u6837\u5c3a\u5bf8\u7684\u5b89\u5353\u673a\u5668\uff0ciPhone 6\u7528\u6237\u5927\u6982\u8981\u5c11\u770b4%\u7684\u5185\u5bb9\u3002\u4e5f\u8bb8\u8fd9\u5e76\u4e0d\u662f\u4ec0\u4e48\u5927\u95ee\u9898\uff0c\u4f46\u662f\u4f60\u4e5f\u8bb8\u8fd8\u662f\u5f97\u68c0\u67e5\u4e0b\u4f60\u7684\u7f51\u7ad9\u662f\u5426\u9002\u914d\u3002<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/iphone6.png\" width=\"745\" height=\"1259\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>\u9002\u914d\u65b0iPhone\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528\u4e0b\u9762\u4e24\u6bb5&lt;meta&gt;<\/p>\n<ul>\n<li>&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=375&#8243;&gt;<\/li>\n<li>&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=414&#8243;&gt;<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h5><strong>3.2 \u8bbe\u5907\u50cf\u7d20\u6bd4<\/strong><\/h5>\n<p>iPhone 6\u4e0e iphone 5\u4e00\u6837\uff0c\u50cf\u7d20\u6bd4\u90fd\u662f2\uff0c\u4f46\u662f\u53e6\u4e00\u65b9\u9762 iPhone 6 401\u7684dpi\u771f\u5b9e\u7684\u50cf\u7d20\u6bd4\u503c\u5e94\u8be5\u5927\u7ea6\u662f2.60\u3002\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u82f9\u679c\u53c8\u6574\u4e86\u4e2a\u65b0\u6982\u5ff5rendered pixels \u6e32\u67d3\u50cf\u7d20\uff0c\u5982\u679c\u50cf\u7d20\u6bd4\u662f3x,\u90a3\u4e48\u7406\u8bba\u4e0a\u4e00\u4e2acss\u5bbd\u8bbe\u4e3a414px\u7684\u5c4f\u5e55\u5e94\u8be5\u62e5\u67091242px\u7684\u7269\u7406\u50cf\u7d20\uff08\u73b0\u5b9e\u4e2d\u662f1080px\uff0c\u5c0f\u4e8613%\uff09\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u5982\u679c\u4f60\u4f7f\u7528\u4e00\u4e2a3x\u7684\u56fe\u7ed9\u9ad8\u6e05\u7684\u5b89\u5353\u8bbe\u5907\uff0c\u540c\u6837\u8fd9\u6837\u56fe\u4e5f\u4f1a\u9002\u914d iPhone 6 Plus \u4f46\u662fiPhone \u7684\u6d4f\u89c8\u5668\u5728\u6e32\u67d3\u5728\u5c4f\u5e55\u4e4b\u524d\u9996\u5148\u4f1a\u8c03\u6574\u56fe\u7247\u5927\u5c0f\u3002<\/p>\n<p>&nbsp;<\/p>\n<h5><strong>3.3 \u56fe\u6807\u5927\u5c0f<\/strong><\/h5>\n<p>iOS\u7279\u6709\u7684\u56fe\u6807\u5927\u5c0f\uff0c\u5728 iPhone 6 plus\u4e0a\u662f180\u00d7180\uff0ciPhone 6 \u4e0a\u5219\u8fd8\u662f\u8001\u7684120\u00d7120\u3002<\/p>\n<p>\u9002\u914diPhone 6 plus\uff0c\u5219\u9700\u8981\u5728\u4e2d\u52a0\u4e0a\u8fd9\u6bb5<\/p>\n<ul>\n<li>&lt;link rel=&#8221;apple-touch-icon-precomposed&#8221; sizes=&#8221;180&#215;180&#8243; href=&#8221;retinahd_icon.png&#8221;&gt;<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h5><strong>3.4 \u542f\u52a8\u56fe<\/strong><\/h5>\n<p>\u5982\u679c\u4f60\u7684webapp\u6709\u4e00\u4e2a\u542f\u52a8\u56fe\uff0c\u90a3\u4e48\u4f60\u53c8\u5f97\u589e\u52a0\u4e24\u884c\u4ee3\u7801\u9002\u914d\u65b0 iPhone \u4e86\u3002<\/p>\n<p>iPhone 6\u5bf9\u5e94\u7684\u56fe\u7247\u5927\u5c0f\u662f750\u00d71294\uff0ciPhone 6 Plus \u5bf9\u5e94\u7684\u662f1242\u00d72148 \u3002<\/p>\n<ul>\n<li>&lt;link rel=&#8221;apple-touch-startup-image&#8221; href=&#8221;launch6.png&#8221; media=&#8221;(device-width: 375px)&#8221;&gt;<\/li>\n<li>&lt;link rel=&#8221;apple-touch-startup-image&#8221; href=&#8221;launch6plus.png&#8221; media=&#8221;(device-width: 414px)&#8221;&gt;<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h5><strong>3.5 UA\u63a2\u6d4b<\/strong><\/h5>\n<p>\u76ee\u524d\u4f4d\u7f6e\uff0c\u6240\u6709\u5347\u7ea7\u5230iOS 8\u7684 iPhone\u90fd\u4f7f\u7528\u540c\u6837\u7684UserAgent\uff0c\u6240\u4ee5\u6211\u4eec\u6682\u65f6\u8fd8\u6ca1\u6709\u529e\u6cd5\u5728\u670d\u52a1\u7aef\u5224\u65ad\u8fd9\u662f\u4ec0\u4e48\u8bbe\u5907\uff0c\u5f53\u7136\uff0c\u901a\u8fc7JS\u548cMedia Queries\u6211\u4eec\u8fd8\u662f\u53ef\u4ee5\u901a\u8fc7\u6280\u5de7\u6765\u5224\u65ad\u7684\u3002<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>\u56db\u3001\u65b0\u7684API<\/strong><\/h4>\n<p>\u4e24\u4e2a\u6700\u91cd\u8981\u7684Api\u652f\u6301\u7ec8\u4e8e\u767b\u5f55\u4e86iOS,\u5206\u522b\u662fWebGL\u548cIndexedDB\uff0c\u4e0e\u6b64\u540c\u65f6\uff0cSafari\u4e5f\u5f00\u59cb\u652f\u6301Web Cryptography\u548cNavigation Timing\u3002<\/p>\n<p>WebGL\u652f\u63013D\u6a21\u62df\uff0c\u5e76\u4e14\u662f\u6d4f\u89c8\u5668\u9ed8\u8ba4\u5f00\u542f\u3002\u5bf9\u4e8e\u6e38\u620f\u5f00\u53d1\u8005\u6765\u8bf4\uff0c\u8fd9\u662f\u4e00\u4e2a\u597d\u6d88\u606f\uff0c\u66f4\u52a0\u4e30\u5bcc\u7684\u4ea4\u4e92\u548c\u5f62\u5f0f\u5c06\u5728\u7f51\u9875\u4e0a\u51fa\u73b0\u3002<\/p>\n<p>\u4f60\u53ef\u4ee5\u5728\u5fae\u8f6f\u7684\u8fd9\u4e2aFishGl\u6d4b\u8bd5\u4e0b iOS 8 Safarai\u4e0a\u8fdb\u884c3D\u6e32\u67d3\u7684\u6548\u679c\u3002<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/webgl.png\" width=\"800\" height=\"450\" \/><\/p>\n<p>IndexdDB\u662fW3C\u7ee7\u8d77\u7528WebSQL\u540e\u63a8\u51fa\u7684\u65b0\u7684\u6807\u51c6\uff0c\u968f\u7740 iOS\u652f\u6301 IndexedDB\uff0c\u6211\u4eec\u80fd\u5728\u4e0d\u540c\u7684\u624b\u673a\u6d4f\u89c8\u5668\u4e0a\u4f7f\u7528\u540c\u4e00\u5957\u6570\u636e\u5e93API\u3002<\/p>\n<p>Navigation Timing API\u5bf9\u4e8eweb\u6027\u80fd\u4f18\u5316\u6765\u8bf4\u662f\u4e2a\u597d\u6d88\u606f\u3002\u901a\u8fc7\u8fd9\u4e2aAPI\u6211\u4eec\u80fd\u8fc7\u6d4b\u91cf\u66f4\u52a0\u7cbe\u51c6\u7684\u52a0\u8f7d\u6e32\u67d3\u65f6\u95f4\uff0c\u4f18\u5316\u7f51\u9875\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>\u4e94\u3001Safari\u65b0\u529f\u80fd<\/strong><\/h4>\n<h5><strong>5.1 \u7f29\u653e<\/strong><\/h5>\n<p>iPhone\u5904\u4e8e\u6a2a\u5c4f\u7684\u65f6\u5019,iPad\uff08\u6a2a\u7ad6\u5747\u53ef\uff09\uff0c\u5982\u679c\u4f60\u7528\u624b\u6307\u634f\u653e\u5c4f\u5e55\uff08\u6bd4\u5982\u8bf4\u4f60\u60f3\u653e\u5927\u7f51\u9875\uff09\uff0c\u4f60\u4f1a\u8fdb\u5165\u4e00\u4e2a\u6807\u7b7e\u9884\u89c8\u6a21\u5f0f\uff0c\u7528\u8d77\u6765\u5012\u662f\u633a\u65b9\u9762\uff0c\u53ef\u662f\u53ef\u80fd\u4f1a\u4e0e\u4f60\u5728\u7f51\u9875\u4e0a\u4f7f\u7528\u7684gesturechange\u4e8b\u4ef6\u6240\u51b2\u7a81\uff0c\u5982\u679c\u4f60\u8981\u4f7f\u7528\u81ea\u5b9a\u4e49\u7f29\u653e\u4e8b\u4ef6\uff0c\u9996\u5148\u7231\u4f60\u4f60\u5f97event.preventDefault()\u6765\u963b\u6b62\u6d4f\u89c8\u5668\u7684\u9ed8\u8ba4\u4e8b\u4ef6\u3002<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/zoomios.PNG\" width=\"737\" height=\"553\" \/><\/p>\n<p>&nbsp;<\/p>\n<h5><strong>5.2 \u53d6\u6d88 MINIMAL-UI<\/strong><\/h5>\n<p>\u516d\u4e2a\u6708\u524d\uff0c\u82f9\u679c\u63a8\u51fa\u4e86\u4e86Minimal UI mode<a href=\"http:\/\/www.36kr.com\/p\/210516.html\" target=\"_blank\">\u300aiOS 7.1\u7684Safari\u4e3ameta\u6807\u7b7e\u65b0\u589eminimal-ui\u5c5e\u6027\uff0c\u5728\u7f51\u9875\u52a0\u8f7d\u65f6\u9690\u85cf\u5730\u5740\u680f\u4e0e\u5bfc\u822a\u680f\u300b<\/a>\uff0ciOS 8\u66f4\u65b0\u540e\u5219\u53c8\u53d6\u6d88\u4e86\u8fd9\u4e2a\uff0c\u4f9d\u65e7\u9ad8\u51b7\u5973\u795e\u8303\uff0c\u6ca1\u8bf4\u4e3a\u4ec0\u4e48\u3002<\/p>\n<p>&nbsp;<\/p>\n<h5><strong>5.3 \u8868\u5355\u81ea\u52a8\u586b\u5199\u548c\u4fe1\u7528\u5361\u626b\u63cf\u529f\u80fd<\/strong><\/h5>\n<p>Safari\u5982\u4eca\u652f\u6301\u81ea\u52a8\u8865\u5168\u8868\u5355\uff0c\u5e76\u4e14\u5f53Safari\u68c0\u6d4b\u5230\u4f60\u8981\u586b\u5199\u7684\u662f\u4fe1\u7528\u5361\u7684\u65f6\u5019\u4ed6\u4f1a\u5141\u8bb8\u4f60\u5f00\u542f\u6444\u50cf\u5934\u76f4\u63a5\u626b\u63cf\u5b9e\u4f53\u4fe1\u7528\u5361\u3002<\/p>\n<p><img alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/scancard.png\" \/><\/p>\n<p>\u4e8e\u6b64\u540c\u65f6\uff0cSafari\u4e5f\u652f\u6301autocomplete\u5c5e\u6027\uff0c\u53c2\u8003latest spec\u3002\u8fd9\u610f\u5473\u7740\u5982\u679c\u4f60\u5728\u4e00\u4e2a\u767b\u5f55\u9875\u9762\uff0cSafari\u53ef\u4ee5\u8c03\u7528Keychain\u91cc\u7684\u6570\u636e\u81ea\u52a8\u586b\u5199\u7528\u6237\u540d\u5e10\u53f7\u3001\u5bc6\u7801\u3002Luis Abreu\u5199\u8fc7\u4e00\u7bc7\u5173\u4e8eiOS 8\u5b89\u5168\u548c\u9690\u79c1\u76f8\u5173\u7684\u6587\u7ae0\uff0c\u63a8\u8350\u53ef\u4ee5\u770b\u770b<\/p>\n<p>&nbsp;<\/p>\n<h5><strong>5.4 RSS\uff01<\/strong><\/h5>\n<p>\u5982\u679c\u4f60\u7684\u7f51\u7ad9\u63d0\u4f9b\u4e86RSS\u8ba2\u9605\uff0ciOS 8\u7528\u6237\u53ef\u4ee5\u76f4\u63a5\u5728\u6d4f\u89c8\u4f60\u7f51\u9875\u7684\u65f6\u5019\u5728\u4e66\u7b7e\u680f\u6253\u5f00\u4ed6\u3002\u5c31\u662f\u90a3\u4e2a@\u56fe\u6807\u91cc\u9762\u6709\u4e2a\u8ba2\u9605\u7684\u6309\u94ae\uff0c\u867d\u8bf4\u6709\u70b9\u5c0f\u4f4e\u8c03\uff0c\u4f46\u597d\u6b79\u8fd8\u662f\u6709\u561b \uff89( \u00b4 \u25bd ` )\uff89\u3002<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/rssios.jpg\" width=\"922\" height=\"1229\" \/><\/p>\n<p>&nbsp;<\/p>\n<h5><strong>5.5 \u5de5\u5177\u680f<\/strong><\/h5>\n<p>\u73b0\u5728\u5730\u5740\u680f\u548c\u5de5\u5177\u680f\u5c31\u53d8\u6210\u534a\u900f\u660e\u4e86\u3002\u5728 iOS 7\u4e0a\u53ea\u6709\u5730\u5740\u680f\u662f\u534a\u900f\u660e\u7684\u3002\u8fd9\u610f\u5473\u7740\u521d\u6b21\u52a0\u8f7d\u7684\u65f6\u5019\u7f51\u9875\u53ef\u89c6\u533a\u57df\u53d8\u5f97\u66f4\u5927\uff08\u5305\u542b\u4e86\u5e95\u90e8\u7684\u5de5\u5177\u680f\uff09\u3002<\/p>\n<p><img alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/bottom-toolbar-300x109.png\" \/><\/p>\n<p>&nbsp;<\/p>\n<h5><strong>5.6 iPad\u4e0a\u7684\u66f4\u65b0<\/strong><\/h5>\n<p>iOS 7\u4ee5\u540e\uff0c\u4f7f\u7528iPhone\u4e0a\u7684Safari\u6d4f\u89c8\u7f51\u9875\uff0c\u6eda\u52a8\u7684\u65f6\u5019\u4f1a\u81ea\u52a8\u9690\u85cf\u5de5\u5177\u680f\uff08ipad\u4e0d\u4f1a\uff09\uff0ciOS 8 ipad\u4e5f\u6709\u4e86\u8fd9\u4e2a\u7ec6\u8282\u4e0a\u7684\u53d8\u5316\uff08\u6a2a\u7ad6\u90fd\u6709\uff09\u3002\u4e0d\u540c\u7684\u662f\uff0c\u5728\u6a2a\u5411\u6a21\u5f0f\u7684\u65f6\u5019\uff0ciPad\u4e0a\u9762\u8fd8\u6709\u4e00\u5c0f\u6761\uff0ciPhone\u5219\u662f\u5168\u5c4f\u3002<\/p>\n<p><img alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/ipad1.png\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>\u9664\u6b64\u4e4b\u5916\uff0cSafari\u5728\u6a2a\u5c4f\u6a21\u5f0f\u5f00\u542f\u4fa7\u8fb9\u680f\u4f1a\u4fdd\u6301\u539f\u6709\u7684viewport\u5927\u5c0f\uff0c\u53ea\u4f1a\u6539\u53d8aspect-ratio<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/ipadios8.PNG\" width=\"737\" height=\"553\" \/><\/p>\n<p>&nbsp;<\/p>\n<h5><strong>5.7 \u4e66\u7b7eicon\u548c\u5e38\u7528\u7f51\u7ad9<\/strong><\/h5>\n<p>Safari\u7ec8\u4e8e\u652f\u6301\u6536\u85cf\u5939\u91cc\u548c\u4e66\u7b7e\u91cc\u7684\u7f51\u9875\u9644\u5e26\u7f51\u7ad9\u7684icon\u56fe\u6807\u3002\u5f53\u4f60\u5728\u5730\u5740\u680f\u8f93\u5165\u5173\u952e\u5b57\u641c\u7d22\u7684\u65f6\u5019\uff0c\u540c\u6837\u4f1a\u5c55\u793a\u7f51\u7ad9\u7684icon\uff08ipad\u521a\u521a\u6211\u6d4b\u8bd5\u4e86\u4e0b\u6ca1\u6709\uff09\u3002<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/icon1.png\" width=\"910\" height=\"343\" \/><\/p>\n<p>&nbsp;<\/p>\n<h5><strong>5.8 \u8de8\u5e73\u53f0\u5207\u6362<\/strong><\/h5>\n<p>\u5982\u679c\u4f60\u540c\u65f6\u4f7f\u7528Mac\u548ciPhone\uff0c\u5f53\u4f60\u5728iPhone\u4e0a\u6d4f\u89c8\u4e00\u4e2a\u7f51\u9875\uff0c\u4f60\u53ef\u4ee5\u5728\u4f60\u7684Mac\u4e0a\uff08\u9700\u8981Yosemite\uff09\u7ee7\u7eed\u9605\u8bfb\uff08\u4eca\u5e74WWDC\u4e0a\u4e13\u95e8\u6f14\u793a\u4e86\u8fd9\u4e2a\u529f\u80fd\uff0c\u8fd8\u5f97\u7b49\u5230Yosemite\u7684\u6b63\u5f0f\u66f4\u65b0\uff09\u3002<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>\u516d\u3001\u66f4\u50cfnative\u7684webapp<\/strong><\/h4>\n<p>\u5982\u679c\u4f60\u60f3\u8ba9\u7528\u6237\u5728\u7f51\u9875\u4e0a\uff0c\u65e0\u7ecf\u786e\u5b9a\uff0c\u5c31\u76f4\u63a5\u8df3\u8f6c\u5230Apple Store\u4e0b\u8f7d\u4f60\u7684\u5e94\u7528\uff0c\u90a3\u662f\u4e0d\u53ef\u80fd\u7684\u3002\u60f3\u8ba9\u7f51\u9875\u4e0e\u672c\u5730\u5e94\u6709\u4e4b\u95f4\u6709\u4ea4\u4e92\uff0ciOS 8\u5e26\u6765\u66f4\u591a\u7684\u4fbf\u6377\u6027\u3002<\/p>\n<ol>\n<li>Safari\u63d2\u4ef6<\/li>\n<li>\u5171\u7528\u8ba4\u8bc1\uff08web\u548c\u672c\u5730\u5e94\u7528\u4e4b\u95f4\u80fd\u5171\u7528\u5b89\u5168\u51ed\u8bc1\uff0c\u65e0\u9700\u518d\u91cd\u65b0\u767b\u5f55\uff09\u3002<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h5><strong>6.1 \u65b0\u7684webview<\/strong><\/h5>\n<p>\u8fd9\u6b21iOS 8\u66f4\u65b0\uff0c\u6700\u4ee4\u4eba\u6fc0\u52a8\u7684\u6d88\u606f\u5c31\u662f\u6df7\u5408\u5e94\u7528\u4e0e Mac \u4e0a\u5171\u540c\u4e86\u4e00\u5957 API\uff0c\u610f\u5473\u7740iOS \u4e0a\u4e5f\u80fd\u6709\u66f4\u591a\u7684\u529f\u80fd\uff0cMac \u548c iOS\u7684\u901a\u4fe1\u4ea4\u4e92\uff0c\u8fd8\u6709\uff1a<\/p>\n<ol>\n<li>\u652f\u6301JavaScript\u4e0e\u672c\u5730\u5e94\u7528\u4e4b\u95f4\u901a\u8fc7postMessage\u7684\u4ea4\u4e92<\/li>\n<li>New classes configure the Web View similar to the power we have on Android\u2019s Web View.\uff08\u8fd9\u6bb5\u8c01\u80fd\u7ffb\u8bd1\u4e0b\uff09<\/li>\n<li>\u66f4\u5f3a\u5927\u7684 Nitro\u5f15\u64ce\uff0c\u76f8\u6bd4\u524d\u4ee34x\u901f\u5ea6\u7684js\u6267\u884c\u901f\u5ea6\u3002<\/li>\n<\/ol>\n<p>\u65b0\u7684 webview(WKWebkit)\u662f\u65b0\u6846\u67b6(WebKit.framework)\u7684\u4e00\u90e8\u5206\uff0c\u4e0e\u8001\u7684UIWebView\u5e76\u4e0d\u662f\u5b8c\u5168\u517c\u5bb9\u3002\u4f46\u662f\u8001\u7684webviwe\u4f9d\u65e7\u4fdd\u7559\uff0c\u6240\u4ee5\u8001\u7684webapp\u8fd8\u662f\u4f1a\u4f7f\u7528\u8001\u7684webview\u3002<\/p>\n<p>\u76ee\u524d\u7684GM\u7248\u672c\uff08\u516c\u5f00\u7248\u4e5f\u662f\u4e00\u6837\u7684\uff09\u4f9d\u65e7\u5b58\u5728\u672c\u5730\u6587\u4ef6\u65e0\u6cd5\u4e0a\u4f20\u7684bug\uff0c\u5bf9\u4e8e\u4e00\u4e9b\u6df7\u5408\u5e94\u7528\uff08\u4f8b\u5982Cordova PhoneGap\uff09\u6765\u8bf4\uff0c\u8fd9\uff08\u591awebviwe\uff09\u7b97\u662f\u4e2a\u597d\u6d88\u606f\u3002<\/p>\n<p>\u8fd9\u5c31\u610f\u5473\u7740\uff0c\u76ee\u524d iOS 8\uff0c\u62e5\u67094\u4e2aweb\u5f15\u64ce\uff0c\u5f53\u7136\uff0c\u4e5f\u610f\u5473\u7740\u517c\u5bb9\u6027\u548cbug\u90fd\u662f\u6709\u5dee\u5f02\u7684\u3002<\/p>\n<ol>\n<li>Safari<\/li>\n<li>Web.app (\u4f7f\u7528full-screen \u684c\u9762\u5e94\u7528)<\/li>\n<li>UIWebView (\u8001)<\/li>\n<li>WKWebView\uff08\u65b0\uff09<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>\u4f60\u53ef\u4ee5\u5728 HTML5Test.com\u8fd9\u91cc\u6d4b\u8bd5\u4e0b\u4f60webapp\u7684\u6027\u80fd\u3002<\/p>\n<p><img loading=\"lazy\" alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/html5test.png\" width=\"450\" height=\"800\" \/><\/p>\n<p>\u5bf9\u4e8e\u90a3\u79cd\u5305\u58f3\u5e94\u7528\u548cwebviewe\u5e94\u7528\u6765\u8bf4\uff0c\u8fd9\u4e2a\u53d8\u5316\u662f\u5341\u5206\u91cd\u8981\u7684\u3002\u6bd4\u5982\u8bf4iOS\u4e0a\u7684Chrome\u548cFacebook\u672c\u5730\u5e94\u7528\u4e2d\u7684\u7f51\u9875\u5e94\u7528\uff08\u6211\u4eec\u730e\u8c79\u7684\u7535\u6c60\u533b\u751f\u3001\u624b\u673a\u730e\u8c79\u4e5f\u5927\u91cf\u5e94\u7528webview\uff09\u3002\u6839\u636e\u4e00\u4efd\u62a5\u544a\uff0c11.5%\u7684iOS\u6d41\u91cf\u662f\u6765\u81ea\u57fa\u4e8ewebview\u7684\u5e94\u7528\u3002<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>\u4e03\u3001Safari \u63d2\u4ef6<\/strong><\/h4>\n<p>iOS 8\u4e0a\u7684Safar \u662f\u7b2c\u4e00\u4e2a\u652f\u6301\u63d2\u4ef6\u548c\u62d3\u5c55\u7684\u7cfb\u7edf\u9884\u88c5\u6d4f\u89c8\u5668\uff08Firefox OS\u4e5f\u8bb8\u4e5f\u7b97\u662f\u4e00\u4e2a\uff09\u3002\u4eceiOS 8\u5f00\u59cb\uff0c\u672c\u5730\u5e94\u7528\u53ef\u4ee5\u62d3\u5c55\u5230\u4e0e Safari \u4ea4\u4e92\uff0c\u4e3b\u8981\u901a\u8fc7\u4e24\u79cd\u65b9\u5f0f\uff1a\u5206\u4eab(Share extension)\u548c\u52a8\u4f5c(Actions)\u3002Action \u53ef\u4ee5\u4e0eDOM\u4ea4\u4e92\uff0c\u610f\u5473\u7740\u53ef\u4ee5\u672c\u5730\u5e94\u7528\u53ef\u4ee5\u76f4\u63a5\u4fee\u6539DOM\u5143\u7d20\u3002<\/p>\n<p>\u6240\u6709\u7684\u63d2\u4ef6\u90fd\u9700\u8981\u7528\u6237\u4e3b\u52a8\u9009\u62e9\u6765\u89e6\u53d1\uff08\u9700\u8981\u70b9\u51fb\u5206\u4eab\u4e2d\u4e0d\u540c\u7684\u6309\u94ae\u6765\u89e6\u53d1\uff09\uff0c\u6682\u65f6\u8fd8\u6ca1\u6709\u53ef\u4ee5\u81ea\u52a8\u8fd0\u884c\u7684\u63d2\u4ef6\u3002<\/p>\n<p>\u65e7\u7248 Safari \u7684\u5206\u4eab \u83dc\u5355\u540c\u6837\u88ab\u57fa\u4e8e JavaScript \u7684\u63d2\u4ef6\u6240\u66ff\u4ee3\u3002\u6bd4\u5982\u8bf4\u6dfb\u52a0\u5230\u684c\u9762\u5982\u4eca\u5c31\u662f\u4e00\u6bb5 Safari \u4e2d\u7684 js \u4ee3\u7801\u3002<\/p>\n<p>\u9664\u4e86\u82f9\u679c\u5728WWDC\u4e0a\u6f14\u793a\u7684\u529f\u80fd\uff0cSafari\u7684\u8fd9\u4e2a\u6539\u8fdb\u610f\u5473\u7740\u6d4f\u89c8\u7f51\u9875\u4f1a\u6709\u6781\u5927\u7684\u4f53\u9a8c\u6539\u5584\u3002\u6bd4\u5982\u8bf4\u4f60\u53ef\u4ee5\u5728Safari\u76f4\u63a5\u8c03\u75281Password\u6216\u8005LastPassword \u4fdd\u5b58\u7684\u5e10\u53f7\u5bc6\u7801\u767b\u5f55\uff0c\u5982\u679c\u4f60\u7684iPhone \u6709 Touch ID\u6307\u7eb9\u8bc6\u522b\uff0c\u4f60\u751a\u81f3\u53ef\u4ee5\u76f4\u63a5\u6307\u7eb9\u9a8c\u8bc1\u767b\u5f55\u3002<\/p>\n<p><img alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/action.png\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Pocket.com \u5df2\u7ecf\u58f0\u660e\u5373\u5c06\u63a8\u51fa\u9488\u5bf9 iOS 8\u7684\u63d2\u4ef6\u3002<\/p>\n<p><img alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/pocket2.png\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4><strong>\u516b\u3001<\/strong><strong>\u524d\u7aef\u548c\u8bbe\u8ba1\u5e08\u7684\u798f\u5229<\/strong><\/h4>\n<p>\u8fd9\u6b21safari\u65b0\u589e\u4e86\u5f88\u591ahtml5\uff0ccss3\u7684\u652f\u6301<\/p>\n<ul>\n<li>CSS Shapes<\/li>\n<li>CSS object-fit<\/li>\n<li>CSS Background Blend modes<\/li>\n<li>word-spacing<\/li>\n<li>CSS Compositing and Blending<\/li>\n<li>Subpixel layout \u652f\u6301\u5c0f\u6570\u70b9<\/li>\n<li>Animated PNG supported APNG\u683c\u5f0f\u56fe\u7247<\/li>\n<li>Parallax effects and Pull-to-refresh supported \uff08\u4e0eScroll\u4e8b\u4ef6\u76f8\u5173\uff09<\/li>\n<li>SVG Fragments Identifiers (for SVG Sprites)<\/li>\n<li>Image Source Set support<\/li>\n<li>HTML Template support<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h5><strong>8.1 Animated PNG<\/strong><\/h5>\n<p>APNG\u683c\u5f0f\u662fPNG\u4f4d\u56fe\u52a8\u753b\u7684\u62d3\u5c55\uff0c\u4f46\u672a\u83b7\u5f97PNG\u7ec4\u7ec7\u5b98\u65b9\u7684\u8ba4\u53ef\uff0c\u4e0eGIF\u6709\u70b9\u7c7b\u4f3c\uff08\u53ea\u4e0d\u8fc7GIF\u662f\u57fa\u4e8eJPG\u7684\uff09\uff0c\u8fd9\u610f\u5473\u7740\u6211\u4eec\u53ef\u4ee5\u5236\u4f5c32\u4f4d\u5168\u5f69\u534a\u900f\u660e\u7684\u52a8\u6001\u56fe\u3002<\/p>\n<p>&nbsp;<\/p>\n<h5><strong>8.2 \u6eda\u52a8\u65f6\u5dee\u4e0e\u4e0b\u62c9\u5237\u65b0<\/strong><\/h5>\n<p>\u5982\u679c\u4f60\u505a\u8fc7\u79fb\u52a8\u7aef\u7684\u9879\u76ee\uff0c\u4f60\u4e00\u5b9a\u77e5\u9053iOS7\u4ee5\u53ca\u4ee5\u524d\u90fd\u4e0d\u652f\u6301scrooll\u4e8b\u4ef6\uff0ciOS 8 \u7ec8\u4e8e\u652f\u6301\u6eda\u52a8\u4e8b\u4ef6\uff0c\u8fd9\u4e0b\u5927\u5bb6\u7ec8\u4e8e\u53ef\u4ee5\u5728iOS\u4e0a\u7528\u5230\u89c6\u89c9\u6eda\u5dee\u76f8\u5173\u7684js\u548ccss\u4e86\uff0c\u4f46\u662f\u4e0d\u4fdd\u8bc1\u5b8c\u5168\u9002\u914d\u3002<\/p>\n<p>\u8fd9\u4e2a\u652f\u6301\u8ba9\u6211\u4eec\u53ef\u4ee5\u505a\u51fa\u4e0b\u62c9\u5237\u65b0\u548c\u65e0\u9650\u4e0b\u62c9\u4e0b\u8f7d\u7684\u6548\u679c\u3002<\/p>\n<p>&nbsp;<\/p>\n<h5><strong>8.3 \u5c0f\u6570\u70b9\u5355\u4f4d<\/strong><\/h5>\n<p>Safari\u73b0\u5728CSS\u5355\u4f4d\u4ece\u6574\u6570\u8f6c\u6210\u4e86\u6d6e\u70b9\u6570\u3002\u8fd9\u610f\u5473\u7740CSS\u5bf9\u8c61\u6a21\u578b\u4e2d\u8bf8\u5982offsetTop\u548cClientWidth\u53ef\u80fd\u4f1a\u53d6\u5f97\u5c0f\u6570\u503c\uff0c\u4e4b\u524d\u8001\u7684iOS\u90fd\u4f1a\u8fd4\u56de\u6574\u6570\u503c\u3002<\/p>\n<p>\u4e0e\u6b64\u540c\u65f6\uff0c\u8fd9\u4e5f\u610f\u5473\u7740\u4f60\u53ef\u4ee5\u7528\u534a\u4e2a\u50cf\u7d20\u5355\u4f4d\u4e86\u3002<\/p>\n<blockquote><p>div {<\/p>\n<p>border-width: 0.5px;<\/p>\n<p>}<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h5><strong>8.4 SVG \u7247\u6bb5\u6807\u8bc6<\/strong><\/h5>\n<p>SVG\u6ca1\u600e\u4e48\u73a9\u8fc7\uff0c\u8fd9\u4e2a\u5c5e\u6027\u4e5f\u4e0d\u61c2\uff0c\u5927\u5bb6\u5148\u770b\u82f1\u6587\u5427\u3002<\/p>\n<blockquote><p>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.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h5><strong>8.5 CSS \u5408\u6210\u548c\u53d8\u5f62<\/strong><\/h5>\n<p>\u5229\u7528mix-blend-mode\u8fd9\u4e2a\u65b0\u5c5e\u6027\u652f\u6301\u6211\u4eec\u628a\u4e0d\u540c\u5f62\u72b6\u7684\u4e0d\u540c\u5143\u7d20\u5408\u6210\u5230\u4e00\u5f20\u56fe\u7247\uff0c\u8fd9\u662fAdobe\u5728HTML5\u65b9\u9762\u65b0\u51fa\u7684\u4e00\u4e2a\u529f\u80fd\u3002\u5728\u4ed6\u4eec\u7684\u7f51\u7ad9\u4e0a\u4f60\u80fd\u770b\u5230\u6f14\u793a\u7684DEMO\u548c\u6587\u6863\u3002<\/p>\n<p>\u4eceAdobe\u5b98\u7f51\u7684\u4f8b\u5b50\u6f14\u793a\u6765\u770b\uff0c\u4f3c\u4e4e\u53d8\u5f62\u662f\u751f\u6548\u4e86\uff0c\u5408\u6210\u5e76\u6ca1\u6709\u751f\u6548\uff08\u6211Mac Chrome\u4e5f\u6ca1\u751f\u6548\uff09\u3002<\/p>\n<p><img alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/blend.png\" \/><\/p>\n<p>&nbsp;<\/p>\n<h5><strong>8.6 CSS \u5f62\u72b6<\/strong><\/h5>\n<p>CSS \u5f62\u72b6\u4e5f\u662fAdobe\u65b0\u51fa\u7684\u4e00\u4e2a\u7279\u6027\u3002\u5bf9\u4e8e\u8fd9\u4e2a\u7279\u6027\uff0c\u63a8\u8350\u4e0bW3Cplus\u4e0a\u7684\u300aCSS Shapes 101\u300b\u3002\u4e2a\u4eba\u8fd8\u662f\u5f88\u770b\u597d\u8fd9\u4e2a\u7279\u6027\u7684\u63a8\u5e7f\u548c\u5e94\u7528\u7684\uff0c\u80fd\u7ed9\u6211\u4eec\u7684\u7f51\u9875\u8bbe\u8ba1\u5e26\u6765\u66f4\u591a\u7684\u53ef\u80fd\u6027\u3002<\/p>\n<p><img alt=\"\" src=\"http:\/\/file.is26.com\/wp-image\/2014\/10\/shapes.png\" \/><\/p>\n<p>&nbsp;<\/p>\n<h5><strong>8.7 Image Source Set<\/strong><\/h5>\n<p>\u6709\u4e86\u89e3\u54cd\u5e94\u5f0f\u56fe\u7247\u7684\u5f00\u53d1\u8005\u5bf9\u8fd9\u4e2a\u5e94\u8be5\u4e0d\u964c\u751f\uff0c\u968f\u7740\u9ad8\u6e05\u5c4f\u7684\u666e\u53ca\uff0c\u9488\u5bf9\u4e0d\u540c\u7684\u5206\u8fa8\u7387\u505a\u9002\u914d\u662f\u4e00\u4e2a\u9700\u8981\u6ce8\u610f\u7684\u95ee\u9898\uff0c\u82f9\u679ciOS 8 \u652f\u6301Image Source Set Spec\uff0c\u610f\u5473\u7740\u53ef\u4ee5\u5728&lt;img&gt;\u6807\u7b7e\u4e2d\u4f7f\u7528\u65b0\u7684\u5c5e\u6027\u3002<\/p>\n<ul>\n<li>&lt;img src=&#8221;lores.png&#8221; srcset=&#8221;hires.png 2x, superhires.png 3x&#8221;&gt;<\/li>\n<\/ul>\n<p>\u5728\u4e0a\u9762\u8fd9\u6bb5\u4ee3\u7801\u7684\u4f8b\u5b50\u4e2d\uff0ciPhone 6 Plus \u7684\u50cf\u7d20\u6bd4\u662f3x\uff0c\u5b83\u4f1a\u52a0\u8f7dsuperhires.png\u8fd9\u5f20\u56fe\u7247\uff0c\u800ciPhone 5s,iPhone 6 \u5219\u4f1a\u52a0\u8f7dhires.png\u8fd9\u79cd\u56fe\uff0c\u5176\u4f59\u7684\u5219\u52a0\u8f7dlores.png\u3002\u4f46\u662f\u9057\u61be\u7684\u662f\uff0ciOS \u6682\u65f6\u8fd8\u4e0d\u652f\u6301&lt;picture&gt;\u5143\u7d20\u3002<\/p>\n<p>&nbsp;<\/p>\n<h5><strong>8.8 HTML\u6a21\u677f<\/strong><\/h5>\n<p>&lt;template&gt;\u5bf9\u4e8ewebapp\u6765\u8bf4\u5341\u5206\u6709\u7528\uff0c&lt;template&gt;\u4e2d\u53ef\u4ee5\u5305\u542b\u4e00\u6bb5css\u6216\u8005js\uff08\u4e0d\u4f1a\u88ab\u6d4f\u89c8\u5668\u89e3\u6790\uff09\uff0c\u5b9e\u9645\u5e94\u7528\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u5229\u7528&lt;template&gt;\u4e2d\u7684\u4ee3\u7801\u521b\u5efa\u4e00\u4e2a\u65b0\u7684node\u3002<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>\u4e5d\u3001\u89c6\u9891\u589e\u5f3a<\/strong><\/h4>\n<p>\u8fd9\u6b21\u66f4\u65b0\u5bf9\u89c6\u9891\u64ad\u653e\u76f8\u5173\u7684\u589e\u5f3a\u4e86\u8bb8\u591a\uff0ciOS8\u5f00\u59cb\u652f\u6301\u5168\u5c4f\u64ad\u653e,Meta Data Api\u548cCSS layering(\u8bdd\u8bf4\u5927\u5bb6\u77e5\u9053HTML5 Video\u5143\u7d20\u662f\u53ef\u4ee5\u901a\u8fc7CSS\u6765\u63a7\u5236\u5427\uff1f)<\/p>\n<p>&nbsp;<\/p>\n<h5><strong>9.1 video\u5143\u7d20\u7684\u5168\u5c4f\u64ad\u653e<\/strong><\/h5>\n<p>Safari\u4e0d\u652f\u6301\u5168\u5c4f\u64ad\u653eAPI\uff0c\u5373\u4f7f\u662fiOS8\u4e5f\u4e0d\u4f8b\u5916\u3002\u4f46\u662f\u80fd\u901a\u8fc7\u4e00\u4e2a\u7279\u6b8a\u7684\u65b9\u6cd5\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u5728&lt;video&gt;\u5143\u7d20\u4e2d\u589e\u52a0\u4e00\u6bb5js\u3002<\/p>\n<ul>\n<li>&lt;input type=&#8221;button&#8221; value=&#8221;Go Full screen&#8221; onclick=&#8217;document.querySelector(&#8220;video&#8221;).webkitEnterFullScreen()&#8217;&gt;<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h5><strong>9.2 \u89c6\u9891 Metadata API<\/strong><\/h5>\n<p>Safari\u5f00\u59cb\u652f\u6301&lt;video&gt;\u7684preload=&#8221;metadata&#8221;\uff0c\u53ef\u4ee5\u8ba9\u6d4f\u89c8\u5668\u89e6\u53d1loadedmetadata\u4e8b\u4ef6\u65b9\u4fbf\u5f00\u53d1\u8005\u63a7\u5236\u3002<\/p>\n<p>&nbsp;<\/p>\n<h5><strong>9.3 CSS \u5206\u5c42<\/strong><\/h5>\n<p>\u6211\u53ef\u4ee5\u901a\u8fc7css\u63a7\u5236\u5176\u4ed6\u5143\u7d20\u653e\u5728&lt;video&gt;\u4e4b\u524d\u3002<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>\u5341\u3001iOS 8 JavaScript\u76f8\u5173<\/strong><\/h4>\n<ul>\n<li>\u90e8\u5206\u652f\u6301ECMAScript 6,\u5305\u62ecPromises, Iterators, Maps, For-of, Weak Maps\u7b49\u7b49\u3002<\/li>\n<li>\u540e\u53f0\u8fd0\u884c\uff1aJavaScript\u4f1a\u5728\u540e\u53f0\u7ee7\u7eed\u8fd0\u884c\uff08\u54ea\u6015\u5df2\u7ecf\u5207\u6362\u4e86\u7a97\u53e3\u751a\u81f3Safari\u5207\u6362\u5230\u540e\u53f0\uff0c\u4f46\u662f\u8ba1\u65f6\u5668 times \u4e0b\u964d\u52301s\u7684\u9891\u7387\uff09\u3002<\/li>\n<li>\u652f\u6301scroll\u4e8b\u4ef6\uff1a\u4e0d\u591a\u8bf4\u4e86\uff0c\u4e0a\u9762\u4ecb\u7ecd\u8fc7\u3002<\/li>\n<li>Unprefixed Page Visibility AP \uff1a \u6211\u6ca1\u641e\u61c2\u8fd9\u4e2a\u662f\u4ec0\u4e48\uff08\u54ea\u4f4d\u77e5\u9053\u6c42\u6307\u5bfc\uff09<\/li>\n<li>\u79fb\u9664window.doNotTrack<\/li>\n<li>\u652f\u6301window.currentScript<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h5><strong>9\u670818\u66f4\u65b0:<\/strong><\/h5>\n<p>\u6709\u5f00\u53d1\u8005\u53d1\u73b0\uff1aiPhone 5\u4e0a\u7684click\u4e8b\u4ef6300ms\u5ef6\u8fdf\u5df2\u7ecf\u53d6\u6d88\u4e86\uff08\u53ea\u662fSafari\uff09\uff0c\u4f46\u662f\u5176\u4ed6\u8bbe\u5907\u4e0a\u7684Safari\u548c WebViews \u4e0a\u8fd8\u6709\uff0c\u5ef6\u8fdf\u4f9d\u65e7\u5728 iPod touch, iPads \u548ciPhone 5s\u4e0a\u3002<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>Bug\u548c\u5b58\u5728\u7684\u95ee\u9898<\/strong><\/h4>\n<ul>\n<li>\u8bf4\u4e86iOS8\u548ciPhone \u7684\u66f4\u65b0\uff0c\u518d\u6765\u8bf4\u8bf4\u76ee\u524d\u53d1\u73b0\u7684 Bug\u3002<\/li>\n<li>\u4e0d\u652f\u6301\u6587\u4ef6\u4e0a\u4f20\uff01\uff01\uff01\u6240\u6709\u7684\u6587\u4ef6\u4e0a\u4f20\u90fd\u5931\u6548\u4e86\uff0c\u4f60\u80fd\u9009\u62e9\u6216\u8005\u62cd\u5f20\u7167\u7247\uff0c\u4f46\u662fjs\u4e0d\u80fd\u83b7\u5f97\u4efb\u4f55\u6570\u636e\u3002HTML\u6216\u8005XMLHttpRequest\u7684POST\u8bf7\u6c42\u4e5f\u4e0d\u884c\u3002\u4f46\u662f\u8fd9\u4e2a\u95ee\u9898\u4f46\u662f\u5728\u684c\u9762\u542f\u52a8\u7684app\u6ca1\u53d1\u751f\u3002<\/li>\n<li>WKWebKit\uff1a\u5728\u65b0\u7684\u5f15\u64ce\u4e0d\u80fd\u8bfb\u53d6\u672c\u5730\u6587\u4ef6\u662f\u4e2a\u5927\u95ee\u9898\uff0c\u6240\u4ee5\u5bf9\u4e8e\u6df7\u5408app\u6765\u8bf4\uff0c\u8fd8\u5f97\u4f7f\u7528\u8001\u7684UIWebView\u3002<\/li>\n<li>window.prompt\u53ef\u80fd\u4f1a\u5bfc\u81f4Safari\u5d29\u6e83<\/li>\n<li>\u9644\u4ef6:\u8bed\u97f3\u5728input\u548clabels\u8f93\u5165\u65f6\uff0c\u4e0d\u7ba1\u7528\u3002(\u5f53\u8f93\u5165\u7684\u65f6\u5019\uff0clabel\u4e0d\u518d\u53d1\u97f3)<\/li>\n<li>\u684c\u9762app\u7684iframes\u4e2d,touch\u4e8b\u4ef6\u6ca1\u6709\u88ab\u76d1\u6d4b\u5230\u3002<\/li>\n<li>\u624b\u673a\u4f11\u7720\u540e\uff0c\u684c\u9762app\u4e2d\u7684Timers\u548crequestAnimationFrame\u56de\u8c03\u6ca1\u6709\u6267\u884c\u3002<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4><strong>\u8bd1\u8005\u8a00<\/strong><\/h4>\n<p>iOS 8\u7ed9web\u524d\u7aef\u5e26\u6765\u7684\u53d8\u5316\u8fd8\u662f\u5f88\u4ee4\u4eba\u6b23\u559c\u7684\uff0c\u66f4\u5f3a\u5927\u7684\u6027\u80fd\uff0c\u66f4\u5f3a\u5927\u7684\u6d4f\u89c8\u5668\u548c\u5185\u6838\uff0c\u66f4\u5f00\u653e\u7684\u63a5\u53e3\uff0c\u53ef\u4ee5\u9884\u89c1\u5728\u9488\u5bf9iOS\u7684web\u5e94\u7528\u4f1a\u6709\u4e00\u4e2a\u66f4\u5927\u7684\u7528\u6b66\u4e4b\u5730\u3002<\/p>\n<p>\u6587\u7ae0\u5f88\u957f\uff0c\u5927\u91cf\u6280\u672f\u8bcd\u6c47\uff0c\u7ffb\u8bd1\u4e86\u534a\u5929\uff0c\u82e5\u8bd1\u6587\u6709\u9519\u8bef\u6216\u8005\u4e0d\u59a5\u4e4b\u5904\uff0c\u6b22\u8fce\u6307\u6b63\u548c\u63d0\u4f9b\u5efa\u8bae\u3002<\/p>\n<p>&nbsp;<\/p>\n<address>\u6587\u7ae0\u7f16\u8bd1\u6765\u6e90\uff1a<a href=\"http:\/\/luolei.org\/safari-ios8-iphone6-web-developers-designers-chinese\/\" target=\"_blank\">luolei.org<\/a><\/address>\n<address>\u8bd1\u8005\u4fe1\u606f\uff1a<strong>\u7f57\u78ca<\/strong>, \u524d\u7aef\u5de5\u7a0b\u5e08, \u6df1\u5733\u4eba,\u5e7f\u5dde\u66a8\u5357\u5927\u5b66,\u5e1d\u90fd\u730e\u8c79\u79fb\u52a8UX\u3002<\/address>\n<address>\u9876\u90e8\u56fe\u7247\u6765\u6e90\uff1a<a href=\"http:\/\/t.ipadizate.es\/2014\/09\/downgrade-ios-8-2.jpg\" target=\"_blank\">ipadizate.es<\/a><\/address>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u559c\u5927\u666e\u5954\uff0c\u559c\u6781\u800c\u6ce3\uff0c\u559c\u5f53\u7239\uff0c\u968f\u7740iPho&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":2435,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[47,51],"tags":[166,906],"_links":{"self":[{"href":"https:\/\/www.uxren.cn\/index.php?rest_route=\/wp\/v2\/posts\/2433"}],"collection":[{"href":"https:\/\/www.uxren.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxren.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxren.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxren.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2433"}],"version-history":[{"count":4,"href":"https:\/\/www.uxren.cn\/index.php?rest_route=\/wp\/v2\/posts\/2433\/revisions"}],"predecessor-version":[{"id":2440,"href":"https:\/\/www.uxren.cn\/index.php?rest_route=\/wp\/v2\/posts\/2433\/revisions\/2440"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxren.cn\/index.php?rest_route=\/wp\/v2\/media\/2435"}],"wp:attachment":[{"href":"https:\/\/www.uxren.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxren.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxren.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}