当前位置:代码狗 > 开发教程 > WEB开发教程 > 正文

阻止浏览器自动调整网页画布大小

iOS与安卓浏览器都基于webkit核心,他们支持使用viewport meta元素覆盖原有画布缩放设置。只需要在html<head>标签中插入一个<meta>标签。标签中设置其具体宽度或者缩放比例如2.0(设备实际尺寸的两倍)。下面是实际尺寸放大设备的两倍的示例代码。

<html>
<head>
<meta name="viewport" content="initial-scale=2.0,width=device-width"/>
<title>代码狗示例代码</title>
</head>
<body>
网页内容..............................
</body>
</html>

代码狗web教程

这里没有放大的原因是因为我是用的QQ浏览器,它是用的chrome内核,想要体验效果需要安卓或者iOS系统,我这里不方便启动虚拟机,想要看效果的自己用手机看吧。

有了缩放,肯定有禁止缩放,相对于缩放,禁止缩放的使用更加频繁,实现代码也很简单,只需将viewport属性修改成以下代码即可:

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

上面initial-scale=1.0指明缩放比例为1.0即不缩放。user-scalable=no,的意思是说禁止缩放。

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论 1

  1. #1

    自适应的好

    小萝博客3年前 (2016-11-18)回复
×

请作者吃根烤肠!

支付宝