資訊專欄INFORMATION COLUMN
摘要：解決上述問題的示例注意語句可以檢查是否支持，但不要在其中使用變量，例如，因?yàn)閷?duì)待無效的變量是返回默認(rèn)值，也就是這個(gè)例子中的的初始值。在上述的示例中，當(dāng)豎屏?xí)r，是，所以函數(shù)返回了。
讓網(wǎng)站適配 iphone X
英文原文地址：https://webkit.org/blog/7929/...
本文原文地址：https://github.com/cnsnake11/...
The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta.
以下關(guān)于safe area insets的內(nèi)容已經(jīng)在20171031的時(shí)候進(jìn)行了修改，會(huì)在ios 11.2beta中表現(xiàn)出來。
Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.
無需任何修改，在ihponeX中safari可以將網(wǎng)頁顯示的很美觀。網(wǎng)頁的內(nèi)容，會(huì)在safe area中顯示出來，所以，網(wǎng)頁的內(nèi)容不會(huì)被圓角和設(shè)備的傳感器條擋住。
The inset area is filled with the page’s background-color (as specified on the
or elements) to blend in with the rest of the page. For many websites, this is enough. If your page has only text and images above a solid background color, the default insets will look great.安全區(qū)域以外的地方（也就是屏幕上下奇形怪狀的地方），會(huì)自動(dòng)被填充背景色（在body或者h(yuǎn)tml元素上定義的背景色）。在大多數(shù)情況下，這樣進(jìn)行兼容就足夠了。只要你的頁面是固定背景色的，這種默認(rèn)的填充方式就足夠用了。
Other pages — especially those designed with full-width horizontal navigation bars, like the page below — can optionally go a little further to take full advantage of the features of the new display. The iPhone X Human Interface Guidelines detail a few of the general design principles to keep in mind, and the UIKit documentation discusses specific mechanisms native apps can adopt to ensure that they look good. Your website can make use of a few similar new pieces of WebKit API introduced in iOS 11 to take full advantage of the edge-to-edge nature of the display.
另外的一些頁面，特別是那種有導(dǎo)航條的-可以有選擇的進(jìn)行更深層次的優(yōu)化來利用新的顯示特性。在ios11中，你的網(wǎng)站可以使用新的webkit api來適配顯示。
While reading this post you can tap on any of the images to visit a corresponding live demo page and take a peek at the source code.
本篇文章的圖片都可以點(diǎn)擊到對(duì)應(yīng)的demo頁面。【注：請(qǐng)點(diǎn)擊原文中的圖片】
圖：safari默認(rèn)的兼容行為。
The first new feature is an extension to the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. viewport-fit is available in iOS 11.
viewport標(biāo)簽有一個(gè)新屬性viewport-fit，這個(gè)屬性可以控制視圖的顯示行為。viewport-fit在ios11上可以使用。
The default value of viewport-fit is auto, which results in the automatic insetting behavior seen above. In order to disable that behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover. After doing so, ourviewport meta tag now looks like this:
viewport-fit的默認(rèn)值是auto，這個(gè)值的行為就像上面的截圖那些，頁面不會(huì)撐到屏幕邊緣。設(shè)置這個(gè)值為cover就會(huì)讓頁面覆蓋整個(gè)頁面，包括屏幕邊緣。示例代碼：
說明：不合法的變量值問題是因?yàn)樽兞康某鲥e(cuò)時(shí)機(jī)是比較晚的，所以，當(dāng)瀏覽器識(shí)別到變量值無效的時(shí)候，已經(jīng)將其它的有效的之前定義的值拋棄了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/89600.html
摘要：解決上述問題的示例注意語句可以檢查是否支持，但不要在其中使用變量，例如，因?yàn)閷?duì)待無效的變量是返回默認(rèn)值，也就是這個(gè)例子中的的初始值。在上述的示例中，當(dāng)豎屏?xí)r，是，所以函數(shù)返回了。 讓網(wǎng)站適配 iphone X 英文原文地址：https://webkit.org/blog/7929/...本文原文地址：https://github.com/cnsnake11/... The sectio...
摘要：頁面主體內(nèi)容限定在安全區(qū)域內(nèi)元素的適配如果元素是定位且，那么除了設(shè)置的還不夠，還需要給它自身添加，因?yàn)樗窍鄬?duì)于屏幕最底部定位的。 屏幕尺寸 垂直方向上，iPhone X的顯示寬度與iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一樣，但是比4.7英寸的顯示屏高145pt。 安全區(qū)域 安全區(qū)域指的是一個(gè)可視窗口范圍，處于安全區(qū)域的內(nèi)容不受圓角（corners）...
摘要：頁面主體內(nèi)容限定在安全區(qū)域內(nèi)元素的適配如果元素是定位且，那么除了設(shè)置的還不夠，還需要給它自身添加，因?yàn)樗窍鄬?duì)于屏幕最底部定位的。 屏幕尺寸 垂直方向上，iPhone X的顯示寬度與iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一樣，但是比4.7英寸的顯示屏高145pt。 安全區(qū)域 安全區(qū)域指的是一個(gè)可視窗口范圍，處于安全區(qū)域的內(nèi)容不受圓角（corners）...
摘要：頁面主體內(nèi)容限定在安全區(qū)域內(nèi)元素的適配如果元素是定位且，那么除了設(shè)置的還不夠，還需要給它自身添加，因?yàn)樗窍鄬?duì)于屏幕最底部定位的。 屏幕尺寸 垂直方向上，iPhone X的顯示寬度與iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一樣，但是比4.7英寸的顯示屏高145pt。 安全區(qū)域 安全區(qū)域指的是一個(gè)可視窗口范圍，處于安全區(qū)域的內(nèi)容不受圓角（corners）...
閱讀 1592·2023-04-25 19:51
閱讀 1992·2019-08-30 15:55
閱讀 1859·2019-08-30 15:44
閱讀 2747·2019-08-30 13:58
閱讀 2753·2019-08-29 16:37
閱讀 1131·2019-08-29 15:34
閱讀 4108·2019-08-29 11:05
閱讀 2714·2019-08-28 17:51
