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 表示采用设备宽度。
IPhone手机页面中点击文本输入框,弹出键盘,网页会放大,如何解决的更多相关文章
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- 移动端页面中点击input输入框的时候弹出的键盘将输入框挡住的问题
使用的是vux框架, 以为是框架问题, 后来发现是把当前页面的高度写死为了height:200%: 只要把高度去掉就能让页面自动弹到输入框的上方:
- Android 中点击返回键弹出“在按一次退出程序”的做法
在很多应用中都有这种做法,连续点击两次才退出程序,目的是为了防止用户不小心点击到了返回键而退出程序了,添加了一次用户确认的过程. 其实做法很简单,只需要做一个延时的消息处理就可以了. 首先在我们在一个 ...
- Ext中点击某个东西弹出框展示
renderer:function(v){ return '<a href="123" data-qtitle="OK Button" data-qwid ...
- android 类似QQ底部输入框弹出键盘和面板冲突 布局闪动处理方案(转)
先看下效果 差不多就是解决这种冲突,布局闪动的 作者的githup :https://github.com/Jacksgong/JKeyboardPanelSwitch Android键盘面板冲突 布 ...
- fullpage插件在移动端弹出键盘页面特殊处理
fullpage插件大家都很熟悉 jquery一款全屏上下滑动的插件. 最近做公司一个活动移动端使用fullpage插件填写input的时候遇见一个问题,手机自带的键盘弹出的时候会把页面顶出去,页面错 ...
- 手机调用系统的拍照和裁剪功能,假设界面有输入框EditText,在一些手机会出现点击EditText会弹出输入法,却不能输入的情况。
1. 拍照裁剪后 点击EditText会弹出输入法,却不能输入.可是点击点一EdtiText就能够输入了,所以我就写了一个看不见的EdtiText,切换焦点,这样就攻克了这个奇怪的这问题,应该是and ...
- 解决默写浏览器中点击input输入框时,placeholder的值不消失的方法
html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消 ...
- 移动端点击输入框,弹出键盘,底部被顶起问题(vue)
这个问题相信做移动端开发的童鞋会有深刻体会,以前用jq开发时就很头疼这个问题,每次底部footer部分需要用position:fixed,如果页面内容不是很长,没有超出屏幕范围,那就还好,没有问题:一 ...
随机推荐
- 数据库记录锁表锁实际研究笔记 --- MSSQLSERVER
直切主题 现有一张表 table : ChenJi ID, DanWeiID, Name, ChenJi 表中记录 ID DanWeiID Name ChenJi --- --- ...
- 获取windows可执行文件的version信息(版本号)
之前在msdn上Version Information看到文件版本信息的介绍,看着整体比较复杂,就一直没做.现在需要获取ocx文件的版本号,所以查找了下相关资料,比较有用的就是VS_FIXEDFILE ...
- shell执行字符串中的命令
假如说你有以下代码: cmd='ls -l' 然后你想要执行将cmd的内容作为命令来执行该怎么操作呢? 答案: cmd='ls -l' ${cmd}
- 九章面试题:Find first K frequency numbers 解题报告
Find first K frequency numbers /* * Input: int[] A = {1, 1, 2, 3, 4, 5, 2}; k = 3 * return the highe ...
- virsh的详细命令解析(一)
virsh的详细命令解析 virsh 有命令模式和交互模式如果直接在vrish后面添加参数是命令模式,如果直接写virsh,就会进入交互模式 virsh list 列出所有的虚拟机,虚拟机的状态有(8 ...
- ios 让textView被键盘挡住上移
注册键盘通知 #pragma mark - 键盘通知 - (void)addNoticeForKeyboard { //注册键盘出现的通知 [[NSNotificationCenter default ...
- [转]快速搞懂Gson的用法
原文地址:http://coladesign.cn/fast-understand-the-usage-of-gson/ 谷歌gson这个Java类库可以把Java对象转换成JSON,也可以把JSON ...
- C语言 · 判断回文
算法提高 判断回文 时间限制:1.0s 内存限制:512.0MB 编程判断一个字符串是否是回文,当字符串是回文时,输出字符串:yes!,否则输出字符串:no!.所谓回文即正向与反向的 ...
- Ehcache BlockingCache 源码分析
BlockingCache是对Ehcache进行的扩展,BlockingCache内置了读写锁,不需要用户显示调用. 要彻底分析BlockingCache的原理,需要首先来看一下它内部用到的一些类. ...
- 使用jquery将表单元素转json提交后台
今天帮朋友解决一个问题,朋友的框架用的layui的,发现layui的里面的data.field不能获取动态生成的标签的值的. 于是使用jquery的方法如下: var formObject = {}; ...