<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>

          meta中viewport介紹,關于移動web前端viewport詳解

          時間:?2017-11-13閱讀:?1069標簽:?meta

          前言

          這次想聊聊移動開發相關的事。是的,你沒有看錯,一句話就可以開始你的移動前端開發。

          你心里一定在想,什么話這么酷,能夠瞬間帶入到移動前端開發的世界。

          但其實它一點也不新奇,不復雜。

          viewport簡介

          沒錯,就是viewport特性,一個移動專屬的Meta值,用于定義視口的各種行為。

          該特性最先由Apple引入,用于解決移動端的頁面展示問題,后續被越來越多的廠商跟進。

          舉個簡單的例子來講為什么會需要它:

          我們知道用戶大規模使用手機等移動設備來進行網頁瀏覽器,其實得益于智能手持設備的興起,也就是近幾年的事。(還記得不久前的幾年,滿大街都還是諾基亞的天下么?)

          這時有一個很現實的問題擺在了廠商面前,用戶并不能很好地通過手機等設備訪問網頁,因為屏幕太小。

          layout viewport

          Apple也發現了這個問題,并且適時的出現,它提出了一個方案用來解決這個問題。在iOS Safari中定義了一個viewport meta標簽,用來創建一個虛擬的布局視口(layout viewport),而這個視口的分辨率接近于PC顯示器,Apple將其定義為980px(其他廠商各有不同①)。

          這就很好的解決了早期的頁面在手機上顯示的問題,由于兩者之間的寬度趨近,CSS只需要像在PC上那樣渲染頁面就行,原有的頁面結構不會被破壞。

          ①的描述大致如下,數值不一定持續準確,廠商可能更改,但這個絕對值其實并非特別重要:
          iOS, Android基本都是: 980px
          BlackBerry: 1024px

          visual viewport

          有了layout viewport,我們還需要一個視口用來承載它,這個視口可以簡單的認為是手持設備物理屏幕的可視區域,我們稱之為(視覺視口)visual viewport。這是一個比較直觀的概念,因為你能看得見你的手機屏幕。

          對于visual viewport,開發者一般只需要知道它的存在和概念就行,因為無法對它進行任何設置或者修改。很明顯,visual viewport的尺寸不會是一個固定的值,甚至每款設備都可能不同。大致列幾種常見設備的visual viewport尺寸:

          • iPhone4~iPhone5S: 320*480px

          • iPhone6~iPhone6S: 375*627px

          • iPhone6 Plus~iPhone6S Plus: 414*736px

          以iPhone4S為例,會在其320px②的visual viewport上,創建一個寬980px的layout viewport,于是用戶可以在visual viewport中拖動或者縮放網頁,來獲得良好的瀏覽效果;布局視口用來配合CSS渲染布局,當我們定義一個容器的寬度為100%時,這個容器的實際寬度是980px而不是320px,通過這種方式大部分網頁就能以縮放的形式正常顯示在手機屏幕上了。

          ②的描述大致如下:
          早期移動前端開發工程師常能見到寬640px的設計稿,原因就是UI工程師以物理屏幕寬度為320px的iPhone4-iPhone5S作為參照設計;
          當然,現在你還可能會見到750px和1242px尺寸的設計稿,原因當然是iPhone6的出現

          當然,為了更好的適配移動端或者只為移動端設計的應用,單有布局視口和視覺視口還是不夠的。

          ideal viewport

          我們還需要一個視口,它類似于布局視口,但寬度和視覺視口相同,這就是完美視口(ideal viewport)。

          有了完美視口,用戶不用縮放和拖動網頁就能夠很好的進行網頁瀏覽。而完美視口也是通過viewport meta的某種設置來達到。

          說了這么一大堆的東西,貌似都和viewport有關聯,那么viewport到底怎么搞,請繼續往下。

          關于3個視口,PPK已經做了非常棒的闡釋,你也可以在StackOverflow上找到一些對此描述的相互補充,例如:[1], [2],有興趣的童鞋也可以看看

          viewport特性

          通常情況下,viewport有以下6種設置。當然廠商可能會增加一些特定的設置,比如iOS Safari7.1增加了一種在網頁加載時隱藏地址欄與導航欄的設置:minimal-ui,不過隨后又將之移除了。

          NameValueDescription
          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-scalableyes/no定義是否允許用戶手動縮放頁面,默認值yes

          width

          width被用來定義layout viewport的寬度,如果不指定該屬性(或者移除viewport meta標簽),則layout viewport寬度為廠商默認值。如:iPhone為980px;

          舉個例子:

          <meta name="viewport" content="width=device-width" />


          除了width之外,還有一個屬性定義也能實現ideal viewport,那就是initial-scale。此時的layout viewport將成為ideal viewport,因為layout viewport寬度與設備視覺視口寬度一致了。

          height

          與width類似,但實際上卻不常用,因為沒有太多的use case。

          initial-scale

          如果想頁面默認以某個比例放大或者縮小然后呈現給用戶,那么可以通過定義initial-scale來完成。

          initial-scale用于指定頁面的初始縮放比例,假定你這樣定義:

          <meta name="viewport" content="initial-scale=2" />


          在說width的時候,我們說到initial-scale也能實現ideal viewport,是的,你只需要這樣做,也可以得到完美視口:那么用戶將會看到2倍大小的頁面內容。

          <meta name="viewport" content="initial-scale=1" />


          在移動端,你可能會考慮用戶瀏覽不便,然后給予用戶放大頁面的權利,但同時又希望是在一定范圍內的放大,這時就可以使用maximum-scale來進行約束。maximum-scale

          maximum-scale用于指定用戶能夠放大的比例。

          舉個例子來講:

          <meta name="viewport" content="initial-scale=1,maximum-scale=5" />

          minimum-scale假設頁面的默認縮放值initial-scale是1,那么用戶最終能夠將頁面放大到這個初始頁面大小的5倍。

          類似maximum-scale的描述,不過minimum-scale是用來指定頁面縮小比例的。

          通常情況下,為了有更好地體驗,不會定義該屬性的值比1更小,因為那樣頁面將變得難以閱讀。

          user-scalable

          如果你不想頁面被放大或者縮小,通過定義user-scalable來約束用戶是否可以通過手勢對頁面進行縮放即可。

          該屬性的默認值為yes,即可被縮放(如果使用默認值,該屬性可以不定義);當然,如果你的應用不打算讓用戶擁有縮放權限,可以將該值設置為no。

          使用方法如下:

          <meta name="viewport" content="user-scalable=no" />


          結語

          正如開篇所說,這既不高深也不新奇,它而僅僅是一點觀念轉變。

          當你掌握了viewport,那么意味著你已經大致了解了移動平臺與PC平臺的不同,你可以更專注而細致的去解決某些平臺差異問題。


          站長推薦

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

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

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

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

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

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

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

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