移動頁面自適應手機屏幕寬度


關於移動頁面自適應手機屏幕寬度的一點總結【站在巨人的肩膀上】

使用meta標簽

最常用的方法,理論上講使用這個標簽是可以適應所有尺寸的屏幕的,但是各設備對該標簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統。

標簽如下

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

解釋

content中的“width” 這個width指的是什么寬度?

有幾個選擇:

  1. 列表內容
  2. 虛擬窗口的寬度
  3. 手機屏幕的寬度
  4. 頁面的寬度

根據我的試驗得這個指的是虛擬窗口的寬度。了解寬度之后,對后續的各種scale,就應該知道是誰與誰的比例。
是虛擬窗口寬度 / 頁面寬度

這樣就會有問題出現安卓設備尺寸差異很大光主流的就有寬度為 320 480 720 1080 等各種尺寸而以上標簽只能支持一種尺寸,當然有些瀏覽器會自動縮放使其適應屏幕,但這不是統一標准,正確的做法是用js動態生成此標簽,當然,應該先獲取屏幕尺寸。

需要注意的點

1:user-scalable=no就一定可以保證頁面不可以縮放嗎?NO,有些瀏覽器不吃這一套,還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設為1.0就可以了。

2:initial-scale=1.0 初始縮放比例受user-scalable控制嗎?不一定,有些瀏覽器會將user-scalable理解為用戶手動縮放,如果user-scalable=no,initial-scale將無法生效。

3:手機頁面可以觸摸移動,但是如果有需要禁止此操作,就是頁面寬度等於屏幕寬度是頁面正好適應屏幕才可以保證頁面不能移動。

4:如果頁面是經過縮小適應屏幕寬度的,會出現一個問題,當文本框被激活(獲取焦點)時,頁面會放大至原來尺寸。

以上是使用viewport標簽的一些小體會,分享給大家。

2、百分比法,首先應明確一個概念,CSS中的百分比中的百指的是什么,我告訴你指的是父元素,所有百分比都是這樣的。子元素寬度50%,那么父元素的寬度就是百,子元素的padding-left:50%,父元素的寬度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默認寬度是屏幕寬度(PC中指的是瀏覽器寬度)子孫元素按百分比定位(或指定尺寸)就可以了,這只適合布局簡單的頁面,復雜的頁面實現很困難。

3、使用css3單位rem,有人這樣解釋rem【root-em】,就是根部的em,想必em大家都懂的,那么rem就是將根節點html的font-size的值作為整個頁面的基准尺寸,默認html的font-size是16px,即1rem=16px,如果某div寬度為32px你可以設為2rem。
當我們把html的font-size設為20px時,1rem=20px,那么32px=1.6rem了。到這里我們也就了解了rem的用法了。
那么怎么用rem來實現不同尺寸屏幕的自適應呢?
在頁面載入開始時首先判斷window的寬度(是window的寬度($(window).width()),不是屏幕分辯率的寬度(screen.width),兩者的差別請自行查閱)。
假設寬度為W,一個div在寬度為640px的設計稿的下的寬度為dW1,這樣如果html的font-size為100px,那么這個div的寬度用rem表示是多少呢?計算:div寬度dW2=dW1/100。
px與rem之間很好換算,除以100就可以。
這是假定屏幕寬度為640的,而不同寬度的屏幕怎么處理,為了能保證換算容易那就要為html設置一個合適的font-size。
計算:
100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;

為什么把100作為一個縮放比例,用10或1不是更方便嗎,這是因為大多數瀏覽器font-size的最小值為12px,所以只能用100了。

5、媒體查詢,媒體查詢也是css3的方法,我們要解決的問題是適應手機屏幕,這個媒體查詢正是為解決這個問題而生,媒體查詢的功能就是為不同的媒體設置不同的css樣式,這里的“媒體”包括頁面尺寸,設備屏幕尺寸等,比如我們要為寬度小於480px的頁面中的class=”icon”的元素設置樣式,可以這樣寫,@media screen and (max-width=480px) {.icon{ some styles }};


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com