代码示例
教程分享

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

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) 打赏
未经允许不得转载:代码狗 » 阻止浏览器自动调整网页画布大小
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    自适应的好

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

高性能服务器,就选阿里云/腾讯云

阿里云订购腾讯云订购

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏