HTML適應手機瀏覽器寬度

2021-07-26 18:30:45 字數 1069 閱讀 9177

在網頁的中增加以上這句話,可以讓網頁的寬度自動適應手機螢幕的寬度:

[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"

/>

<

meta

name

=content

="yes"

/>

<

meta

name

="format-detection"

content

="telephone=no"

/>

第一行:

width=device-width :表示寬度是裝置螢幕的寬度

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

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

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

user-scalable=yes:表示使用者是否可以調整縮放比例

第二行:

設定iphone端頁面全屏。

第三行:

取消數字被識別為**號碼。

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

[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%",整個頁面在裝置上看起來就是全屏的了。

HTML適應手機瀏覽器寬度

在網頁的中增加以上這句話,可以讓網頁的寬度自動適應手機螢幕的寬度 html view plain copy meta name viewport content width device width,initial scale 1.0,minimum scale 0.5,maximum scale ...

html 自適應手機端寬度

meta name viewport content width device width,initial scale 1 viewport是網頁預設的寬度和高度,上面這行 的意思是,網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1....

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

可以通過設定螢幕的縮放比例來實現 一 使用meta標籤,這也是普遍使用的方法,理論上講使用這個標籤是可以適應所有尺寸的螢幕的,但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。1 通過設定請求頭實現 在網頁的中增加以上這句話,可以讓網頁的寬度自動適應手機螢幕的寬度。其中 wi...