课程咨询:400-111-8989

  • 如何解决HTML5手机端页面缩放问答

    发布:HTML5培训  来源:html5问吧  时间: 2018年08月27日

  • 今天小编为大家分享的文章是关于如何解决HTML5手机端页面缩放的问题的。相信会有一些前端工程师在工作中会遇到这些问题,下面小编就来跟大家说一说解决办法,帮助大家HTML5+CSS3从入门到精通,快来和小编一起看一看吧。...

  • 今天小编为大家分享的文章是关于如何解决HTML5手机端页面缩放的问题的。相信会有一些前端工程师在工作中会遇到这些问题,下面小编就来跟大家说一说解决办法,帮助大家HTML5+CSS3从入门到精通,快来和小编一起看一看吧。

    如何解决HTML5手机端页面缩放问答

    通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是:

    <meta name="viewport" content="width=device-width,initial-scale=1">

    或者是

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

    下面我们来对这句话解释一下就是:

    viewport : 表示的是显示窗口;

    width=device-width,initial-scale=1.0 : 表示的是显示窗口的宽度等于设备的屏幕宽度,initial-scale=1.0,即初始的缩放比例为1.0;

    minimum-scale : 表示的是允许缩放的最小比例

    maximum : 表示的是允许缩放的最大比例

    user-scalable : 表示是否允许用户进行页面的缩放,值可以为yes或者no

    实例问题情况:

    现象:

    当用户在手机端页面当中点击input输入框进行文本的编辑时,页面会自动的被放大

    解决:

    在页面的头部<head>标签中插入

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

    或者是不允许用户缩放页面 user-scalable=no

    以上就是小编今天为大家分享的关于如何解决HTML5手机端页面缩放的问题。希望本篇文章能够对你有所帮助,想要了解更多HTML5方面的知识,记得关注达内HTML5培训官网哦。

  • 上一篇:收藏-HTML5前端开发的学习工具有哪些?

    下一篇:没有下一篇了

网站导航
2002-2018 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56