標籤:javascript
網上關於這方面的文章有不少,重複的東西本文再也不贅述,僅提供思路,並解釋一些其餘文章講述模糊的地方。css
一、使用meta標籤,這也是廣泛使用的方法,理論上講使用這個標籤是能夠適應全部尺寸的屏幕的,可是各設備對該標籤的解釋方式及支持程度不一樣形成了不能兼容全部瀏覽器或系統。html
首先解釋該標籤的含義:java
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>css3
若是你徹底不瞭解這個標籤的使用須要先百度一下。瀏覽器
解釋:content中的「width」 這個width指的是什麼寬度,我看過的文章對這個都沒有解釋的很清楚,有幾個備選:虛擬窗口的寬度、手機屏幕的寬度、仍是頁面的寬度等等?經試驗這個指的是虛擬窗口的寬度。瞭解寬度以後,對後續的各類scale,就應該知道是誰與誰的比例,是 虛擬窗口寬度 / 頁面寬度,這樣就會有問題出現安卓設備尺寸差別很大光主流的就有寬度爲 320 480 720 1080 等各類尺寸而以上標籤只能支持一種尺寸,固然有些瀏覽器會自動縮放使其適應屏幕,但這不是統一標準,正確的作法是用js動態生成此標籤,固然,應該先獲取屏幕尺寸。佈局
<script type="text/javascript"> var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp.$1); if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }else{ document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); } } else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); } </script>
對於此標籤還有如下須要分享:scala
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將沒法生效。htm
3)、手機頁面能夠觸摸移動,可是若是有須要禁止此操做,就是頁面寬度等於屏幕寬度是頁面正好適應屏幕才能夠保證頁面不能移動。
4)、若是頁面是通過縮小適應屏幕寬度的,會出現一個問題,當文本框被激活(獲取焦點)時,頁面會放大至原來尺寸。
以上是使用viewport標籤的一些小體會,分享給你們。
三、百分比法,首先應明確一個概年,CSS中的百分比中的百指的是什麼,我告訴你指的是父元素,全部百分比都是這樣的。子元素寬度50%,那麼父元素的寬度就是百,子元素的padding-left:50%,父元素的寬度是百,子元素的margin-top:20%,那麼父元素的高是百。因此body默認寬度是屏幕寬度(PC中指的是瀏覽器寬度)子孫元素按百分比定位(或指定尺寸)就能夠了,這隻適合佈局簡單的頁面,複雜的頁面實現很困難。
四、使用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了。因此會在頭部加上這個JS代碼
<script type="text/javascript"> var html = document.querySelector(‘html‘); var rem = html.offsetWidth / 6.4; html.style.fontSize = rem + "px"; </script>
五、媒體查詢,媒體查詢也是css3的方法,咱們要解決的問題是適應手機屏幕,這個媒體查詢正是爲解決這個問題而生,媒體查詢的功能就是爲不一樣的媒體設置不一樣的css樣式,這裏的「媒體」包括頁面尺寸,設備屏幕尺寸等,好比咱們要爲寬度小於480px的頁面中的class="icon"的元素設置樣式,能夠這樣寫,@media screen and (max-width=480px) {.icon{ some styles }};這裏僅介紹這種思路,關於媒體查詢的詳細用法請參閱css手冊。
綜上,至今,我沒有找到一種徹底適應各類屏幕的方法,只能根據頁面特色選擇不一樣的方法,多種方法靈活運用,纔是王道。