移動端頁面按手機螢幕解析度自動縮放的js

2021-09-08 19:45:08 字數 2332 閱讀 2742

1

做手機端頁面最頭疼的就是物理解析度和邏輯解析度的轉換了,當拿到設計圖的時候,圖基本都是按物理解析度來設計的,一般常用的為640(iphone5/5s)、750(iphone6/6s),而谷歌等瀏覽器採用小手機模式瀏覽頁面的時候,上面的值為邏輯解析度,除錯的時候很難把控頁面樣式,在手機端的樣式也會因此大亂,在頁面頭部加入以上一段js之後,在手機端就可以正常顯示了,

var phonescale = phonewidth/750;

除以的為設計圖設計的頁面寬度,750是按iphone6來設計(根據自己使用需求來修改),即讓頁面的放大比率=螢幕的邏輯解析度/物理解析度,從而達到適應手機的效果。

(注意,有時候頁面加了這段**在除錯的時候,切記重新整理,重新整理過後就會按手機縮放比例顯示)

概念解析:

phys.width:一般我們所指的寬度

width

即為phys.width

,物理寬度(物理解析度

device-width:又稱為

css-width

,裝置寬度(邏輯解析度

其中我們可以獲取phys.width通過

document.documentelement.clientwidth;

而獲取css-width通過

window.screen.width

獲取。

所以這裡  phonewidth(邏輯解析度) = parseint(window.screen.width);

如iphone6的

phys.width

為750px

,而css-width

為375px。

明白乙個瀏覽器預設行為。

試想,瀏覽器如果把電腦端的980px的網頁展現在寬度為

750px

的iphone6

手機屏上,勢必會放不下,手機端橫向會出現滾動條,怎麼阻止這種情況呢,很簡單,瀏覽器預設乙個虛擬視窗,不同瀏覽器有不同的虛擬視窗寬度的預設值如:

safari iphone

:980px;

opera:850px;

andriod webkit:800px;

ie:974px;

然後會把這個980px虛擬視窗裝進寬度為

750px

的iphone6

中,當然這樣的話必須縮放,這就是為什麼在手機中展現電腦端頁面沒有出現橫向滾動條,而且字跡明顯變小的原因。

initial-scale='+phonescale+',minimum-scale='+phonescale+',maximum-scale='+phonescale+'

這段**切記要指定 initial-scale=***,在安卓系統中,不指定預設的nitial-scale=***,只指定最小和最大縮放值,也可以正常顯示,但是

safari

瀏覽器則會失效,對於寬度是

100%

的頁面, 則顯示為頁面的

30%左右的寬。

target-densitydpi=device-dpi

webkit核心預設按照

160的

dpi來排版。假如裝置真實

dpi是

480,寬度是

1080

,在webkit

會按160dpi

,360

寬度來排版。排版結束後在放大到

1080

寬。所以當取window.innerwidth之類的值的時候,取的是

webkit

實際排版寬度

360,而不是

1080.

target-densitydpi=device-dpi可以強制核心以

480dpi

排版,使畫面更精細,

window.innerwidth

也將為螢幕寬度

1080.

但webkit從去年開始取消了對

target-densitydpi

的支援。(所以現在不建議寫該屬性了)

想實現target-densitydpi=device-dpi的效果有什麼方法?提交此次補丁的

webkit

開發者說可以用

responsive images 

和css device units

來替代。

(2017.02.20更新)

手機螢幕解析度

解析度指螢幕影象的精密度,亦即顯示屏所能顯示的畫素的多少。畫素 所有的畫面都是由乙個個小點組成,這些小點就是畫素。螢幕解析度通常由橫向畫素個數 豎向畫素個數表示。常見的手機螢幕顯示級別有vga hvga qvga wvga等。其中vga最早是ibm計算機的一種顯示標準,逐漸演變為解析度640 480...

獲取手機螢幕解析度

獲取手機螢幕解析度的類 displaymetrics dm new displaymetrics getwindowmanager getdefaultdisplay getmetrics dm 獲得手機的寬頻和高度畫素單位為px string str 手機螢幕解析度為 dm.widthpixels...

android程式介面自動適應螢幕解析度例子

為不同解析度的手機建立介面 1,首先進入res 資料夾下。2,建立乙個名為 layout 1024x768 資料夾,其中1024x768 是螢幕解析度的大小,值得注意的是解析度中大的數字必須寫到前面,否 則會產生語法錯誤。如layout 768x1024 的寫法是錯誤的。3,編寫main.xml 4...