零酷科技设计出品
扫描关注零酷科技微信公众账号

扫一扫微信二维码

做网站时,在手机端显示总感觉比例不对该如何解决

西安零酷科技2020-07-10经验之谈
相信不少开发者在做网站时都或多或少遇到过在PC上页面显示正常,但是在移动端就出现了比例失调问题。导致页面文字和页面元素显示过于小,这样不利于用户浏览。

前天我们在开发一个邮件发送预约表单程序,在预约成功后要给与弹窗提示。在PC上测试一切OK,当用移动设备进行访问的时候,这个弹窗就显得苍白无力,显示在手机里面需要用双手进行缩放才可以看清,这样太不利于展现。因为弹窗是在后台代码里写的,所以在后面就没有写html页面元素,直接用layui弹窗进行了配置,这一切在电脑上显示正常,手机就不行了。然后就是找不到原因,最后才想起h5页面有个元素叫viewport。通过这个meta标签我们可以控制页面显示的比例。

下面叫需要的meta代码贴出来,希望对于您有帮助。
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" name="viewport" />
以后做h5响应式开发记着将这行代码加入到head头部就可以了。你就会发现那个比例失常的问题就可以迎刃而解了。


文章关键词
做网站
h5页面
手机端