問題一，解析度resolution適配：
不同螢幕寬度，html元素寬高比和字型大小，元素之間的距離自適應，使用rem單位。
問題二，單位英吋畫素數ppi適配：
使用rem單位，文字會發虛。段落文字，使用px單位，用media query或js來適配。標題文字可以直接使用rem單位。
問題三，裝置畫素比例dpr適配：
1物理畫素在
顯示效果不合需求。要根據devicepixelratio來修改meta標籤的scale
demo如下：
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
/>
<
meta
name
="viewport"
content
="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<
title
>移動h5自適應布局
title
>
<
style
>
/*320px布局
*/html
body
body
.div2
.div3
.div4
.img1
style
>
head
>
<
body
>
<
div
class
="div2"
>動態更改html元素大小
div>
<
div
class
="div3"
>
div>
<
div
class
="div4"
>
div>
<
img
class
="img1"
src=""
alt=""
/>
body
>
<
script
>
//該**來自
(function
(doc, win) ;
//abort if browser does not support addeventlistenerif(
!doc.addeventlistener)
return
; win.addeventlistener(resizeevt, recalc,
false
); doc.addeventlistener(
'domcontentloaded
', recalc,
false
);
//一物理畫素在不同螢幕的顯示效果不一樣。要根據devicepixelratio來修改meta標籤的scale,要注釋上面的meta標籤
(function
() else
if(devicepixelratio
>=2&&
(!dpr
||dpr
>=
2))
else
} else
scale =1
/dpr;
//var
metael =""
; metael
=doc.createelement(
'meta');
metael.setattribute(
'name',
'viewport');
metael.setattribute(
'content',
'initial-scale='+
scale +'
, maximum-scale='+
scale +'
, minimum-scale='+
scale +'
, user-scalable=no');
if(docel.firstelementchild)
else
})();
})(document, window);
script
>
html
>
移動h5自適應布局
from 問題一，解析度resolution適配 不同螢幕寬度，html元素寬高比和字型大小，元素之間的距離自適應，使用rem單位。問題二，單位英吋畫素數ppi適配 使用rem單位，文字會發虛。段落文字，使用px單位，用media query或js來適配。標題文字可以直接使用rem單位。問題三，裝置...
移動端h5框架自適應 移動h5自適應布局
轉 問題一，解析度resolution適配 不同螢幕寬度，html元素寬高比和字型大小，元素之間的距離自適應，使用rem單位。問題二，單位英吋畫素數ppi適配 使用rem單位，文字會發虛。段落文字，使用px單位，用media query或js來適配。標題文字可以直接使用rem單位。問題三，裝置畫素比...
H5移動頁面自適應
1 使用meta標籤 viewport h5移動端頁面自適應普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。viewport 是使用者網頁的可視區域。翻譯為中文可以叫做 視區 手機瀏覽器是把頁面放在乙個虛擬的 ...