HTML5里面怎样自动适应手机屏幕的高度_随笔

有两种

1.通过设置viewport参数

2.使用css3中的缩放

两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例，然后进行缩放。但是因为目前手机种类繁多，浏览器种类也很多，所以每种方法各自都有不少的问题。

<</span>meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />

在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

HTML5的移动端网页设计稿，通常情况下，内容区为750px或960px或者1080px的，一般不小于750px像素大小（宽度）

设计稿可以比750px大，但是绝对不能比750px小，这个主要是由于当前手机的分辨率相对较高（iPhone 6是375物理像素，但实际像素为其两倍，也就是750，这个750就是这么来的）

如果设计图稿过小，前端在实现图稿的时候里面的图片大小在高分辨率的情况下会显得模糊不清，所以这也是为何要“大”分辨率

此外需要注意的是，要保证页面的基准字体大小，在320px的设计稿当中，最小字体不宜小于12像素，其他像素的设计稿当中，等比例换算即可（12/320px*设计稿像素值）

用以下代码开头：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">

使用百分比定义宽度，，

CSS代码可以适当使用：

@media only screen and (max-width:449px){

}

自动根据屏幕像素调用不同的CSS代码。

欢迎分享，转载请注明来源：内存溢出

HTML5里面怎样自动适应手机屏幕的高度