移动端开发viewport设置/常见的meta设置

责编:menVScode 2018-01-02 23:40 阅读(1225)

        viewport 视口(可视区窗口)

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=.5,minimum-scale=.5,maximum-scale=1">

        默认不设置 viewport 一般可视区宽度在移动端是980。

width          可视区的宽度 (number||device-width),如width=500
user-scalable  是否允许用户缩放 (yes||no) iOS10无效
initial-scale  初始缩放比例
minimum-scale  最小缩放比例
maximum-scale  最大缩放比例
devicePixelRatio  像素比

        user-scalable:是否允许用户缩放 (yes||no),在移动端可以通过手指将页面进行放大缩小,这样可能会导致一个问题;放大之后可能会导致页面挤压,以致页面错位等。

        initial-scale:初始页面按多大的比例去显示;如果设置0.5,那么就把页面上的所有元素缩放0.5。实际上浏览器操作的时候,把可视窗口尺寸放大了一倍。

        minimum-scale:初始缩放比例一定要与最小缩放比例保持一致,否则无意义。

        devicePixelRatio像素比:像素比把一个像素 放大至 N个像素去显示,n = window.devicePixelRatio;比如设置一个div宽高是100px*100px,那么它会以200px*200px去显示。是浏览器厂商出厂的时候的一个设置。获取像素比方式:

<script type="text/javascript">
	alert(window.devicePixelRatio);
</script>

        每款手机它都有自己的像素比,而且都不太一样。可以通过chrome浏览器控制台手机模拟器去查看,如下图。iphone 5像素比是2,而iphone 6 Plus是3。

QQ截图20180103001403

        为什么要做这么一个设置?目前手机的分辨比较高,而尺寸并不是特别大。切图的时候,设计稿至少是750px。


        常见的meta设置

        (1) 强制x5内核的浏览器竖屏显示横屏或者竖屏显示:portrait、landscape。比如QQ浏览器、微信|qq内置的浏览器。

<meta name="x5-orientation" content="portrait" />

        (2) x5内核的浏览器设置全屏

<meta name="x5-fullscreen" content="true" />

       (3) UC强制竖屏或者横屏:portrait、landscape

<meta name="screen-orientation" content="portrait">

        (4) UC全屏显示

<meta name="full-screen" content="yes">

        只有 x5内核的浏览器和UC浏览器支持以上设置,ios系统的safari浏览器、安卓原生的浏览器不支持以上设置,不过可以通过内置的陀螺仪来设置。

        (5) 禁止识别号码和邮箱号码:在移动端上碰到数字或者邮箱地址它会识别,点击之后会进行拨打号码或者发送邮件的默认行为。

<meta name="format-detection" content="telephone=no, email=no" />

        (6) 拨打电话和发邮件

<a href="tel:18888888888">请拨打电话18888888888</a>
<a href="mailto:mvc@menvscode.com">请发送邮件</a>
标签: viewport 移动端 meta
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码