viewport,html,body在pc和移動的差別

  移動端的頁面通常會設置:
<meta name="viewport" content="width=device-width, iuser-scalable=no" />     html

pc的頁面則不會設置,而且pc的頁面在移動端應該也保持樣式的穩定,所以不會設置上面的meta標籤。移動端的默認viewport爲980,實際上屏幕能夠顯示的寬度大多在1200+以上,即便一個比較寬的頁面也不會有滾動條。scala

不作初始化設置下,html在pc和移動的差別:htm

    pc中,html,body的寬度始終是頁面的寬度blog

而且隨着放大,html和body始終是佔滿屏幕的寬度的,可是html和body寬度的值變小了,內容被放大。縮小時正好相反。meta

 

移動端:虛擬寬度默認980,實際寬度通常在1200+以上im

  1. 當內容區域較小時(即不超過980時)html和body也是佔滿屏幕的寬度的,與pc端相同。隨着放大,html和body開始超出屏幕,出現滾動條,可是html和body寬度的值不變,
  2. 當內容寬度較大,超出980時,且未超過屏幕最大容納寬度(1200+)時,不會出現滾動條,頁面寬度之內容區域寬度一致,而html,body的寬度爲屏幕的一部分,
  3. 當內容寬度很大時,超出屏幕最大容納寬度(1200+)時,開始出現滾動條,屏幕寬度爲最大顯示寬度。而html,body的寬度爲屏幕的一部分

 

  

參考:http://www.cnblogs.com/yoyoyo/p/3590110.html樣式

相關文章
相關標籤/搜索