<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          如何針對 iPhone X 設計網站?

          時間:?2018-01-02閱讀:?855標簽:?iPhone X
          本文譯自 webkit.org 的  Designing Websites for iPhone X。翻譯來源: 前端外刊評論,這是一篇來自蘋果關于 iPhone X 適配的官方指南,希望可以幫助各位前端開發者做好 iPhone X 的適配。 

          在全面屏的 iPhone X 上,不需要而外的代碼,Safari 可以非常完美的展示現有的網站。整個網站的內容都會自動地展示在一個“安全區域”內,并不會被四周的圓角或者“小劉海”遮擋住。

          Safari 使用頁面的背景色(一般就是 <body> 或者 <html> 元素的 background-color)來填充周圍空出的區域,與頁面的其他部分保持協調。這種方式可以解決網站大部分的問題。如果本身就是一個固定背景色上堆疊一些文字或者圖片的網站,默認的填充區域看起來會很協調。

          不過還有一些網站——尤其是那些有橫向貫穿的導航條的網站,像下面這樣的就需要做一點額外的工作,使得在這種新的顯示下繼續利用全面屏的優勢,且不顯得突兀。 iPhone X Human Interface Guidelines 詳細解釋了一些需要注意的設計準則, UIKit documentation 也給出了一些 Native App 可以采用的機制來保證視覺效果。同樣,在網站這邊,也可以利用 iOS 11 里 Safari 引入的特定 API 來使用好全面屏顯示的優點。

          下面的每個圖都可以點擊打開可對應的demo,方便大家查看效果和源碼。


          Safari 帶默認安全邊距的樣子


          全屏顯示

          第一個新特性擴展了現有 viewport 這個 meta 標記,添加了名字為  viewport-fit 的屬性,用來控制網頁的安全邊距。viewport-fit 在 iOS 11 上才有效。

          viewport-fit 的默認值是 auto,效果如上圖,默認留出安全邊距。如果想要全屏顯示,需要將 viewport-fit 設置為 cover。meta 標記看上去像下面這樣:

          <metaname='viewport'content='initial-scale=1, viewport-fit=cover’>
          

          刷新頁面,導航欄擴展到了屏兩端,看起來舒服多了。但是,馬上我們就會發現系統默認讓出安全邊距是很有必要的:網頁內容被 iPhone 的小劉海覆蓋了,底部的導航也好難使用。


          使用 viewport-fit 開啟全屏。


          安全邊距

          接下來需要讓使用了 viewport-fit=cover 之后界面還是可用的。我們需要有選擇地給那些包含重要信息的元素加上內邊距,避免它們受到屏幕形狀的影響。這樣不但可以充分利用 iPhone X 擴大的屏幕,也可以避免手機四個角、小劉海和退到主屏標志的影響。


          橫向 iPhone X 上的安全和非安全區域,包括安全邊距示意圖。

          如何達到這個目標?iOS 11 的 WebKit 引入了一個 新的 CSS 函數——env(),還有 四個預定義的環境變量。—— safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, 和 safe-area-inset-bottom。結合這兩個新東西,就可以在樣式中使用安全邊距。

          env() 函數在 iOS 11 發布的時候用的名字是 constant()。Safari Technology Preview 41 和 iOS 11.2 beta 發布的時候,constant() 被替換成了 env()。可以利用 CSS 的降級機制同時支持這兩個版本的不同函數。但如果不考慮兼容性,往后就使用 env()。

          env() 可以用在任何支持 var() 的地方——舉個例子,padding 屬性中使用:

          .post {
              padding: 12px;
              padding-left: env(safe-area-inset-left);
              padding-right: env(safe-area-inset-right);
          }
          

          在不支持 env() 函數的瀏覽器中,這條 CSS 規則會被忽略。因此,針對每個使用 env() 的地方,加一條 CSS 備用規則尤其重要。


          設置安全邊距后,重要內容完全可見了。


          借力 min() 或者 max() 橫豎屏兼容

          本節說的特性都是 Safari Technology Preview 41 和 iOS 11.2 beta 上引入的新特性。

          如果你已經給自己的站點添加了安全邊距,可能就會發現,指定了安全邊距后,無法再給元素指定一個最小邊距。如上面到例子,把 12px 的左邊距換成 env(safe-area-inset-left) ,當把手機豎起來,安全邊距變成了 0px,文字內容立馬就和手機邊緣粘在一起了。


          安全邊距無法完全替代外邊距。

          為了解決這個問題,就需要在默認邊距和安全邊距中選擇較大值。我們可以使用 Safari Technology Preview  新增的 CSS 函數 min() 或 max() 來實現。這兩個函數都接受任意個數字,返回其中最小或者最大值。兩個函數都可以使用在 calc() 中,也可以互相嵌套,也允許在函數內使用計算(就如 calc() 的那樣)。

          使用 max() 解決戰斗:

          @supports(padding: max(0px)) {
              .post {
                  padding-left: max(12px, env(safe-area-inset-left));
                  padding-right: max(12px, env(safe-area-inset-right));
              }
          }
          

          別忘了使用 @supports 來對 min 和 max 函數特性進行兼容性檢查,因為不是所有瀏覽器都支持這個特性。由于 CSS 對  無效 variable 的處理,不要在 @supports 查詢中使用 variable。

          手機處于豎屏狀態時,env(safe-area-inset-left) 取值為 0px,因此 max() 函數的取值為 12px。橫屏時,env(safe-area-inset-left) 因為小劉海的存在,會比較大,max() 就會返回安全邊距,這樣就可以保證重要的內容總是可見。


          使用 max() 結合使用安全邊距和默認邊距。

          經驗老到的 Web 開發者可能碰到過像上看這樣的“CSS locks”原理,用來將 CSS 屬性值限制在一個特定范圍內。min() 和 max() 可以讓這件事變得更簡單,對以后快速實現響應式設計將會非常有用。

          譯注:CSS locks 具體是什么,不太理解,哪位大大給分享一下?


          問題反饋

          大家現在就可以開始適配 viewport-fit 和安全邊距了,可以使用 iPhone X 模擬器上的 Safari 來測試,這需要安裝  Xcode 9。歡迎你把利用上面特性來做兼容的方案分享給我們,也可以給我們提交問題和反饋,發郵件到  web-evangelist@apple.com ,或者在 Twitter 上直接  @webkit 留言。碰到任何 bug 可以提到  WebKit’s bug tracker

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/301

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网