• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    一个手机自适应的网页效果解决显示页面很小的问题
    工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录!

    其实主要就是改掉HTML页面声明:

    在网页中加入以下代码,就可以正常显示了:

    复制代码
    代码如下:

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

    解释:

    width - viewport的宽度
    height - viewport的高度
    initial-scale - 初始的缩放比例
    minimum-scale - 允许用户缩放到的最小比例
    maximum-scale - 允许用户缩放到的最大比例
    user-scalable - 用户是否可以手动缩放

    精简点的话,可以把上面的代码更改为以下代码,效果是一样的:

    复制代码
    代码如下:

    <meta content="width=device-width,user-scalable=no" name="viewport">

    最后就是不要设置太大的具体宽度属性了,比如你在网页把Body的宽度属性设为1000px,这肯定是不行的了,但是可以设置为90%,这是屏幕自适应的。

    PS:本人做了个效果页面,可以用手机正常显示哦,
    上一篇:html中的图片直接使用base64编码后的字符串代替
    下一篇:html 弹出div实现移动居中非常好用
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    一个手机自适应的网页效果解决显示页面很小的问题 一个,手机,自,适应,的,网页,