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>
这里没有放大的原因是因为我是用的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