移动设备（触屏设备）禁止放大缩小网页

发布时间：2015-10-15, 10:40:39 分类：HTML | 编辑 off 网址 | 辅助

正文 621字数 1,061,209阅读

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

Run code

Cut to clipboard

把这段代码放在<head></hea>标签中间即可！

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

标签: 手机22 网页16 缩小1 放大4 禁止4 触屏1 设备4 移动11

有过 5 条评论 »

广西南宁市 2016-09-02, 11:31:27

移动平台对 META 标签的定义

下面介绍一些有关标记的例子及解释。

一、meta 标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）。

1、http-equiv 属性的 Content-Type 值（显示字符集的设定）

说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。

用法：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Run code

Cut to clipboard

注意：该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。它可以在同一页面显示中文简体、繁体及其它语言（如日文，韩文）等。

2、name 属性的 viewport 值（移动屏幕的缩放）

也就是可视区域。对于桌面浏览器，我们都很清楚 viewport 是什么，就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。

实际上我们可以操作的属性有 4 个：

width – // viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
height – // viewport 的高度 （范围从 223 到 10,000 ）
initial-scale – // 初始的缩放比例 （范围从 > 0 到 10）
minimum-scale – // 允许用户缩放到的最小比例
maximum-scale – // 允许用户缩放到的最大比例
user-scalable – // 用户是否可以手动缩放 (no，yes)

Run code

Cut to clipboard

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

Run code

Cut to clipboard

说明：

强制让文档与设备的宽度保持 1:1 ；
文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；
注意：实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，解决方法：定义页面的最小宽度

body {
    min-width: 320px;
}

Run code

Cut to clipboard

3、name 属性的 format-detection 值（忽略页面中的数字识别为电话号码）

<meta name="format-detection" content="telephone=no" />

Run code

Cut to clipboard

说明：

使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。
若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
4、name 属性的 apple-mobile-web-app-capable 值（网站开启对 web app 程序的支持）

<meta name="apple-mobile-web-app-capable" content="yes" />

Run code

Cut to clipboard

说明：

网站开启对 web app 程序的支持。
该 meta 可以看出内容为“苹果设备 web 应用程序 xx”，就是说该 meta 是专门定义 web 应用的。
5、name 属性的 apple-mobile-web-app-status-bar-style 值（改变顶部状态条的颜色）

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Run code

Cut to clipboard

说明：

在 web app 应用下状态条（屏幕顶部条）的颜色；
默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px ）。

6、name 属性设置作者姓名及联系方式

<meta name="author" contect="liudanyun, liudy102@163.com" />

Run code

Cut to clipboard

二、苹果 Web App 其他设置：

当然，配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定，如下所示：

<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />

Run code

Cut to clipboard

说明：这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径（图片四）。

使用：

该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
图片尺寸可以设定为 57*57（px）或者 Retina 可以定为 114*114（px），iPad 尺寸为 72*72（px）

<link rel="apple-touch-startup-image" href="logo_startup.png" />

Run code

Cut to clipboard

说明：这个 link 就是设置启动时候的界面。

使用：

放置的路径和上面一样。
官方规定启动界面的尺寸必须为 320*640（px），原本以为 Retina 屏幕可以支持双倍，但是不支持，图片显示不出来。
如果对 Web App 的这两个 meta 还有不能详细理解的可以查看官方解释：Meta Tags

关于 link 方面还有更多的参数设置（例如：iPod、iPad、iPhone 不同尺寸不同图标），可以查看官方标准文档：Configuring Web Applications

reply | quote | #¹

广西南宁市 2016-09-06, 14:50:03

移动端网页布局中需要注意事项以及解决方法总结，这份对我们在布局移动端网页的时候非常有用！
winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

<meta name="msapplication-tap-highlight" content="no">

Run code

Cut to clipboard

1、关闭iOS键盘首字母自动大写

<input type="text" autocapitalize="off" />

Run code

Cut to clipboard

2、禁止文本缩放

html {
-webkit-text-size-adjust: 100%;
}

Run code

Cut to clipboard

3、移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,
textarea {
border: 0;
-webkit-appearance: none;
}

Run code

Cut to clipboard

4、忽略页面的数字为电话，忽略email识别

<meta name="format-detection" content="telephone=no, email=no"/>

Run code

Cut to clipboard

5、快速回弹滚动

.xxx {
overflow: auto;
-webkit-overflow-scrolling: touch;
}

Run code

Cut to clipboard

PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，

6、移动端禁止选中内容

div {
-webkit-user-select: none;
}

Run code

Cut to clipboard

7、移动端取消touch高亮效果
在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来禁止：

.xxx {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Run code

Cut to clipboard

8、如何禁止保存或拷贝图像
通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

img {
-webkit-touch-callout: none;
}

Run code

Cut to clipboard

PS：需要注意的是，该方法只在 iOS 上有效。

9、解决字体在移动端比例缩小后出现锯齿的问题：

-webkit-font-smoothing: antialiased;

Run code

Cut to clipboard

10、栅格布局：

box-sizing:border-box;

Run code

Cut to clipboard

可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局

11、

input[type=input]{-webkit-appearance:none;}

Run code

Cut to clipboard

移除ios的样式，但这个属性存在bug，会导致iso无法获取checkbox值，给这个元素重新赋上

input[type=checkbox]{-webkit-appearance:checkbox;}

Run code

Cut to clipboard

就不会报错了。

12、按钮被按下效果的实现需要给a标签加a:active属性和添加一段空函数

document.body.addEventListener('touchend', function () { });

Run code

Cut to clipboard

13、解决去掉下边框：

-webkit-border-bottom:none;

Run code

Cut to clipboard

14、英文文本换行(不拆分单词)：

word-wrap:break-word

Run code

Cut to clipboard

15、字体大小尽量使用pt或者em，rem，代替px。

16、设置input里面placeholder字体的大小

::-webkit-input-placeholder{ font-size:10pt;}

Run code

Cut to clipboard

17、wap页面有img标签，记得加上

display：block；

Run code

Cut to clipboard

属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置

width:100%;

Run code

Cut to clipboard

而且不能添加高度。

18. ~~移动端如何清除输入框内阴影~~
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,
textarea {
border: 0;
-webkit-appearance: none;
}

Run code

Cut to clipboard

19. 移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

.user-select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

Run code

Cut to clipboard

兼容IE6-9的写法：

onselectstart="return false;" unselectable="on"

Run code

Cut to clipboard

20.audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播

$('html').one('touchstart',function(){
audio.play()

Run code

Cut to clipboard

})

21.手机拍照和上传图片

<input type="file">的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
ios 有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能
winphone不支持
input控件默认外观丑陋

Run code

Cut to clipboard

22. 消除transition闪屏

.css{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}

Run code

Cut to clipboard

23.
开启硬件加速
解决页面闪白
保证动画流畅

.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

Run code

Cut to clipboard

设计高性能CSS3动画的几个要素
尽可能地使用合成属性transform和opacity来设计CSS3动画，
不使用position的left和top来定位
利用translate3D开启GPU加速

**************************************************************************
框架
1. 移动端基础框架
zepto.js 语法与jquery几乎一样，会jquery基本会zepto~
iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~
underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
fastclick 加快移动端点击响应时间
animate.css CSS3动画效果库
Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案

2. 滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js
swiper

3.瀑布流框架
masonry
工具推荐
caniuse 各浏览器支持html5属性查询
paletton 调色搭配

对于网站字体设置
移动端项目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

Run code

Cut to clipboard

移动和pc端项目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

Run code

Cut to clipboard

有关Flexbox弹性盒子布局一些属性
不定宽高的水平垂直居中

.xxx{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%，-50%)；
border-radius:6px;
background:#fff;
}

Run code

Cut to clipboard

[flexbox版]不定宽高的水平垂直居中

.xx{
justify-content:center;//子元素水平居中，
align-items:center;//子元素垂直居中;
display:-webkit-flex;
}
//单行文本溢出
.xx{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

多行文本溢出
.xx{
display:-webkit-box !importmort;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(数字2表示隐藏两行)
}

Run code

Cut to clipboard

使用流体图片

img{
width:100%;
height:auto;
width:auto\9;
}

Run code

Cut to clipboard

一像素边框（例子:移动端列表的下边框）

.list-iteam:after{
position: absolute;
left: 0px;
right: 0px;
content: '';
height: 1px;
transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-webkit-transform:scaleY(0.5);
background-color: #e3e3e3;
}

Run code

Cut to clipboard

针对适配等比缩放的方法:

@media only screen and (min-width: 1024px){
body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
body{zoom:1.125;}
}

Run code

Cut to clipboard

解决Chrome动画”卡顿”的办法

可以这样开启所有浏览器的GPU硬件加速：

webkit-transform: translateZ(0); 
-moz-transform: translateZ(0); 
-ms-transform: translateZ(0); 
-o-transform: translateZ(0); 
transform: translateZ(0);
或

webkit-transform: translate3d(0,0,0); 
-moz-transform: translate3d(0,0,0); 
-ms-transform: translate3d(0,0,0); 
-o-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);

Run code

Cut to clipboard

reply | quote | #²

广西南宁市 2016-09-06, 17:37:29

<p style="
    text-align: center;
">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- blog -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:100px"
     data-ad-client="ca-pub-7446801070784593"
     data-ad-slot="7895142255"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>

Run code

Cut to clipboard

reply | quote | #³

广西南宁市 2019-05-28, 17:39:25

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

Run code

Cut to clipboard

关于手机端点击HTML input输入框页面放大的问题解决放法
苹果手机点击输入框页面自动放大
移动端苹果ios input输入框点击后，页面会缩放，导致显示问题
苹果手机点击输入框时页面自动放大
手机输入框自动变大

reply | quote | #⁴

广西百色市 2025-02-26, 17:03:58

html5手机键盘修改换行为提交文字
h5修改软键盘文字，将换行改为前往或发送

在H5中，可以使用`enterkeyhint`属性来修改软键盘右下角的回车键行为，
例如将其设置为go、send等，以实现将回车键显示为‘前往’或‘发送’的效果。
此属性支持的值包括enter、done、go、next、previous、search和send，
可以根据需求选择合适的行为。

怎么修改h5软键盘的文字，将右下角的回车换行更改为前往或发送

文档中很多都是修改为前往，搜索，提交等。
修改的<input type="search" />属性，
其实还是有另外一个属性的：enterkeyhint

<input enterkeyhint="enter">
<input enterkeyhint="done">
<input enterkeyhint="go">
<input enterkeyhint="next">
<input enterkeyhint="previous">
<input enterkeyhint="search">
<input enterkeyhint="send">

Run code

Cut to clipboard

reply | quote | #⁵

Records:5 1/1 «‹1 ›»

lizhenqiu blog

移动设备（触屏设备）禁止放大缩小网页

相关日志

有过 5 条评论 »

留下評論