怎么讓手機網站自適應設備屏幕寬度？

手機或平板設備屏幕大小差距大，因此打開網頁時寬度也不同，新做的手機網站如何能夠自適應網頁寬度，就有了一些難度，還好程序猿們想到了這一點，在代碼里面做了如此設置，下面簡單講解一下。

工具/原料

 

• 寫代碼軟件，記事本或DW都可以
• 手機或平板一台，做測試

方法/步驟

 

1.  

   方法：在網頁頭部加上這樣一條meta標簽：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 

    

   解釋：

   width=device-width ：寬度等於設備屏幕的寬度

   initial-scale=1.0：表示：初始的縮放比例

   minimum-scale=0.5：表示：最小的縮放比例

   maximum-scale=2.0：表示：最大的縮放比例

   user-scalable=yes：表示：用戶是否可以調整縮放比例

2. 2

   另外：如果想控制字體的大小的話，應該使用相對大小，可以用下面這段代碼，一般不用也可，這里只是說名一種方法。

   相對大小的字體

   字體也不能使用絕對大小px，而只能使用相對大小em。

   　　body {font: normal 100% Helvetica, Arial, sans-serif;}

   上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。

   　　h1 {font-size: 1.5em; }

   然后，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。

   　　small {font-size: 0.875em;}

   small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。

    

    

    

   有兩種
   1.通過設置viewport參數
   2.使用css3中的縮放
   兩種方法都需要獲取當前屏幕大小然后根據網頁寬度來計算縮放比例，然后進行縮放。但是因為目前手機種類繁多，瀏覽器種類也很多，所以每種方法各自都有不少的問題。
   
   <</span>meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />
   在網頁的中增加以上這句話，可以讓網頁的寬度自動適應手機屏幕的寬度。
   
   其中：
   width=device-width ：表示寬度是設備屏幕的寬度
   initial-scale=1.0：表示初始的縮放比例
   minimum-scale=0.5：表示最小的縮放比例
   maximum-scale=2.0：表示最大的縮放比例
   user-scalable=yes：表示用戶是否可以調整縮放比例