頁面自適應手機顯示

2021-06-26 13:18:02 字數 704 閱讀 6019

只需要一句話:

解析:解釋:content中的「width」 這個width指的是什麼寬度,我看過的文章對這個都沒有解釋的很清楚,有幾個備選:虛擬視窗的寬度、手機螢幕的寬度、還是頁面的寬度等等?經試驗這個指的是虛擬視窗的寬度。了解寬度之後,對後續的各種scale,就應該知道是誰與誰的比例,是 虛擬視窗寬度 / 頁面寬度,這樣就會有問題出現安卓裝置尺寸差異很大光主流的就有寬度為 320 480 720 1080 等各種尺寸而以上標籤只能支援一種尺寸,當然有些瀏覽器會自動縮放使其適應螢幕,但這不是統一標準,

正確的做法是用js動態生成此標籤,當然,應該先獲取螢幕尺寸。

對於此標籤還有以下需要分享:

1)、user-scalable=no就一定可以保證頁面不可以縮放嗎?no,有些瀏覽器不吃這一套,還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設為1.0就可以了。

2)、initial-scale=1.0   初始縮放比例受user-scalable控制嗎?不一定,有些瀏覽器會將user-scalable理解為使用者手動縮放,如果user-scalable=no,initial-scale將無法生效。

3)、手機頁面可以觸控移動,但是如果有需要禁止此操作,就是頁面寬度等於螢幕寬度是頁面正好適應螢幕才可以保證頁面不能移動。

4)、如果頁面是經過縮小適應螢幕寬度的,會出現乙個問題,當文字框被啟用(獲取焦點)時,頁面會放大至原來尺寸

移動頁面自適應手機螢幕寬度

網上關於這方面的文章有很多,重複的東西本文不再贅述,僅提供思路,並解釋一些其他文章講述模糊的地方。1 使用meta標籤,這也是普遍使用的方法,理論上講使用這個標籤是可以適應所有尺寸的螢幕的,但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 cont...

移動頁面自適應手機螢幕寬度

網上關於這方面的文章有很多,重複的東西本文不再贅述,僅提供思路,並解釋一些其他文章講述模糊的地方。1 使用meta標籤,這也是普遍使用的方法,理論上講使用這個標籤是可以適應所有尺寸的螢幕的,但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 cont...

移動頁面自適應手機螢幕寬度

1 使用meta標籤,這也是普遍使用的方法,理論上講使用這個標籤是可以適應所有尺寸的螢幕的,但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 content中的 width 這個width指的是什麼寬度,我看過的文章對這個都沒有解釋的很清楚,有幾個...