zoukankan      html  css  js  c++  java
  • IPhone手机页面中点击文本输入框,弹出键盘,网页会放大,如何解决

    在head标签中加入以上meta声明。具体属性可以谷歌/百度。

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

    我查了下viewport,有几个属性:
    width - viewport的宽度 height - viewport的高度
    initial-scale - 初始的缩放比例
    minimum-scale - 允许用户缩放到的最小比例
    maximum-scale - 允许用户缩放到的最大比例
    user-scalable - 用户是否可以手动缩放

    Apple发明了viewport的meta标签,例如:
    <meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    其中width表示网页的布局layout宽度。

    initial-scale表示初始时的缩放比例,

    minimum-scale和maximum-scale分别表示最小和最大缩放比例。

    这样,上面这个meta就表示布局宽度320像素,初始缩放为1倍(即不缩放),且禁止用户缩放(因为最大最小缩放都为1倍)——一个专为iPhone优化的网页通常就会用这样的设置。

     

    如果你是针对960设计的,那么可以用这样一个meta:
    <meta name="viewport" content="width=960, initial-scale=0.33">
    这表示布局宽度为960像素,初始缩放为0.33,也就是,会缩小到大约1/3,这样正好可以在320像素的宽度里看到整个网页。你也可以不设initial-scale,因为手机浏览器大多默认会初始缩放到可容纳整个网页宽度。

     

    也可以是关键字device-width  表示采用设备宽度。

  • 相关阅读:
    网络安全专家教你设置史上最安全的WiFi密码
    Python语言为什么被称为高级程序设计语言?
    常用组件
    小程序路由
    小程序的生命周期函数
    小程序案例-查询天气
    第一个小程序,获取用户名和用户头像
    小程序util.js的使用
    小程序文件夹目录分析 转
    特效 css3 渐变背景框
  • 原文地址:https://www.cnblogs.com/joeylee/p/3782377.html
Copyright © 2011-2022 走看看