網頁寬度自動適應手機螢幕寬度的方法

[html]

view plain

copy

<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：表示使用者是否可以調整縮放比例

如果是想要一開啟網頁，則自動以原始比例顯示，並且不允許使用者修改的話，則是：

[html]

view plain

copy

<meta

name

="viewport"

content

="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

/>

這樣子寫後，就可以把一些頁頭橫幅等的的寬度都設定成style="width:100%"，整個頁面在裝置上看起來就是全屏的了。

網頁寬度自動適應手機螢幕寬度

在網頁的中增加以上這句話，可以讓網頁的寬度自動適應手機螢幕的寬度。其中 width device width 表示寬度是裝置螢幕的寬度 initial scale 1.0 表示初始的縮放比例 minimum scale 0.5 表示最小的縮放比例 maximum scale 2.0 表示最大的縮放比...

網頁寬度自動適應手機螢幕寬度的方法

在網頁的中增加以上這句話，可以讓網頁的寬度自動適應手機螢幕的寬度。其中 width device width 表示寬度是裝置螢幕的寬度 initial scale 1.0 表示初始的縮放比例 minimum scale 0.5 表示最小的縮放比例 maximum scale 2.0 表示最大的縮放比...

網頁寬度自動適應手機螢幕寬度的方法

html view plain copy meta name viewport content width device width,initial scale 1.0,minimum scale 0.5,maximum scale 2.0,user scalable yes 在網頁的中增加以上這句...