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

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,的意思是说禁止缩放。

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/241404.html

(0)
上一篇 2022年4月7日 00:36
下一篇 2022年4月7日 00:36

相关推荐

发表回复

登录后才能评论