移動端網頁中ViewPort的使用

<

meta 
name
="viewport"
content
="width=device-width,target-densitydpi=high-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
>

<

meta 
name
=」viewport」 
content
=」width=device-width, 
initial-scale
=1.0, 
user-scalable
=no」
/>

<

meta 
name
="viewport"
content
="target-densitydpi=device-dpi, width=480px, user-scalable=no"
/>

<

meta 
content
="target-densitydpi=320, width=device-width, user-scalable=no"
name
="viewport"
>

如何使移動手機網頁根據固定的比例進行放大或者縮小呢？

首先在viewport中定義裝置寬度等於固定寬度。

<

meta 
name
="viewport"
content
="target-densitydpi=device-dpi, width=320px, user-scalable=no"
/>

android中是根據dpi來顯示頁面，使用js設定一下dpi

function

setandroiddpi()
}//setandroiddpi();
window.onresize = function
()

根據em寫的網頁，修改html和body的font-size來讓網頁自動縮放

function

init() 
else
document.getelementsbytagname("body")[0].style.fontsize = basesize + "px";
document.getelementsbytagname("html")[0].style.fontsize = basesize + "px";
}init();
window.onresize = init;

參考：

移動端viewport講解

viewport描述 也就是可視區域。對於桌面瀏覽器，我們都很清楚viewport是什麼，就是除去了所有工具欄 狀態列 滾動條等等之後用於 看網頁的區域，這是真正有效的區域。由於移動裝置螢幕寬度不同於傳統web,因此我們需要改變viewport 這是真正有效的 區域。由於移動裝置螢幕寬度不同於傳統w...

移動端viewport解惑

再配合 查詢 media就可以寫出適配各種手機端的頁面了。但是，為什麼就能夠了呢？網上查了很多資料，反覆看了很多遍還是似懂非，知道看了知乎中乙個問題的解答，茅塞頓開。自己不明白三個點，其中viewport，width，device width分別代表什麼？viewport瀏覽器的視窗，顯示網頁內容的...

移動端viewport的作用

我們知道，在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素，這可能會造成我們的乙個錯覺，那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此，css中的畫素只是乙個抽象的單位，在不同的裝置或不同的環境中，css中的1px所代表的裝置物理畫...