1个手机上自融入的网页页面实际效果处理显示信

工作中必须,要做1个手机上自融入的网页页面实际效果,终究搞定,先共享并纪录!

实际上关键便是改掉HTML网页页面申明:

在网页页面中添加下列编码,便可以一切正常显示信息了:

拷贝编码
编码以下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>

解释:

width - viewport的宽度
height - viewport的高宽比
initial-scale - 原始的放缩占比
minimum-scale - 容许客户放缩到的最少占比
maximum-scale - 容许客户放缩到的最大占比
user-scalable - 客户是不是能够手动式放缩

精简点的话,能够把上面的编码变更为下列编码,实际效果是1样的:

拷贝编码
编码以下:

<meta content="width=device-width,user-scalable=no" name="viewport">

最终便是不必设定太大的实际宽度特性了,例如你在网页页面把Body的宽度特性设为1000px,这毫无疑问是不好的了,可是能够设定为90%,这是显示屏自融入的。

PS:自己做了个实际效果网页页面,能够用手机上一切正常显示信息哦,