IPhone手机页面中点击文本输入框,弹出键盘,网页会放大,如何解决
2024-10-19 04:22:26
在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 表示采用设备宽度。
最新文章
- 我为NET狂官方面试题
- redis 命令
- 论文阅读(Xiang Bai——【CVPR2015】Symmetry-Based Text Line Detection in Natural Scenes)
- Do It Wrong, Get It Right
- C++中的const详解
- Count Color
- LeetCode初体验—twoSum
- devenv 命令用法
- 财务模块多组织,GL, SLA, SOB, COA, BSV, CCID, LE 概念的简单介绍
- window下的nginx的安装和使用
- 移动namenode、secondarynamenode和jobTracker的节点(使其成为独立节点)
- Leetcode - 517 Super Washing Machines
- Java课程总结
- Jmeter连接MySQL和SQL Server配置(转载)
- Unity3D安卓打包
- python 全栈开发,Day33(tcp协议和udp协议,互联网协议与osi模型,socket概念,套接字(socket)初使用)
- SQL EXCEPT INTERSECT
- PAT 1063 计算谱半径
- 解题:NOI 2009 诗人小G
- u-boot2016.05 有关 4096page size , oob == 224 nand 的移植支持