在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  表示采用设备宽度。

IPhone手机页面中点击文本输入框,弹出键盘,网页会放大,如何解决的更多相关文章

  1. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  2. 移动端页面中点击input输入框的时候弹出的键盘将输入框挡住的问题

    使用的是vux框架, 以为是框架问题, 后来发现是把当前页面的高度写死为了height:200%: 只要把高度去掉就能让页面自动弹到输入框的上方:

  3. Android 中点击返回键弹出“在按一次退出程序”的做法

    在很多应用中都有这种做法,连续点击两次才退出程序,目的是为了防止用户不小心点击到了返回键而退出程序了,添加了一次用户确认的过程. 其实做法很简单,只需要做一个延时的消息处理就可以了. 首先在我们在一个 ...

  4. Ext中点击某个东西弹出框展示

    renderer:function(v){ return '<a href="123" data-qtitle="OK Button" data-qwid ...

  5. android 类似QQ底部输入框弹出键盘和面板冲突 布局闪动处理方案(转)

    先看下效果 差不多就是解决这种冲突,布局闪动的 作者的githup :https://github.com/Jacksgong/JKeyboardPanelSwitch Android键盘面板冲突 布 ...

  6. fullpage插件在移动端弹出键盘页面特殊处理

    fullpage插件大家都很熟悉 jquery一款全屏上下滑动的插件. 最近做公司一个活动移动端使用fullpage插件填写input的时候遇见一个问题,手机自带的键盘弹出的时候会把页面顶出去,页面错 ...

  7. 手机调用系统的拍照和裁剪功能,假设界面有输入框EditText,在一些手机会出现点击EditText会弹出输入法,却不能输入的情况。

    1. 拍照裁剪后 点击EditText会弹出输入法,却不能输入.可是点击点一EdtiText就能够输入了,所以我就写了一个看不见的EdtiText,切换焦点,这样就攻克了这个奇怪的这问题,应该是and ...

  8. 解决默写浏览器中点击input输入框时,placeholder的值不消失的方法

    html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消 ...

  9. 移动端点击输入框,弹出键盘,底部被顶起问题(vue)

    这个问题相信做移动端开发的童鞋会有深刻体会,以前用jq开发时就很头疼这个问题,每次底部footer部分需要用position:fixed,如果页面内容不是很长,没有超出屏幕范围,那就还好,没有问题:一 ...

随机推荐

  1. maven生成jar,运行却提示没有“没有主清单属性”

    转自:http://www.jianshu.com/p/fd5bd8657852 修改pom.xml <project xmlns="http://maven.apache.org/P ...

  2. C#数组 添加元素

    例1: string[] a = new string[] { "1", "2", "3" }; 给a追加一个 "4" ...

  3. python 视频处理,提取视频相关帧,读取Excel

    一共这几个模块: class videoReader 读取视频 class videoFramesExtractor(videoReader):继承了读取视频,主要是用来限制读取视频中的哪些帧,并保存 ...

  4. c字符输出

    #include<stdio.h> int main() { char c1,c2; c1 = ; c2 = ; printf("c1 = %c,c2 = %c\n", ...

  5. Mac OS X下的移动光标和文字编辑快捷键

    移动光标快捷键 Control-F 光标前进一个字符,相当于右键(F = Forward) Control-B 光标后退一个字符,相当于左键(B = Backward) Control-P 上移一行, ...

  6. WPF使用socket实现简单聊天软件

    公司网络限制不能传文件,先贴部分代码 控件添加到界面就行,界面随意布局 项目结构: 1.解决方案 1.1. Client 1.2. Server Client: <Window x:Class= ...

  7. CPP_运算符重载及友元

    运算符重载 两种重载方法1)成员函数 a + b => a.operator+(b); 一个参数 2)友元函数 a + b => operator+(a, b); 两个参数. friend ...

  8. Java编程的逻辑 (39) - 剖析LinkedList

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  9. .net lock的使用

    内容参考自:http://daimajishu.iteye.com/blog/1079107 一. 基本使用形式 二.应用举例 三.需要注意的地方 四.lock应避免锁定public 类型或不受程序控 ...

  10. Hbase 学习(七) rowkey设计

    一直以来对rowkey的设计都比较迷茫,<hbase权威指南>倒是给出了个还算靠谱的例子. 下面这个例子有点儿像帖子表结构,它的rowkey设计是这样的,可以简单的理解为,什么人在什么时间 ...