web移动端开发经验总结
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web移动端开发经验总结相关的知识,希望对你有一定的参考价值。
整理web移动端开发经验,部分内容借鉴于网上的博文。
1、meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" /> <!-- width可视宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩放的最大比例,minimum-scale允许用户缩放的最小比例,user-scalable是否允许用户缩放。--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 设置Web应用是否以全屏模式运行。删除默认的苹果工具栏和菜单栏。如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 控制状态栏显示样式。设置为blank-translucent,则状态栏显示为黑色半透明。--> <meta name="format-detection" content="telephone=no" /> <!-- 禁止ios把数字转化为拨号链接 -->
2、屏蔽ios点击元素时出现的阴影
-webkit-tap-highlight-color:rgba(255,255,255,0);
3、ios 设置input 按钮样式会被默认样式覆盖
input,textarea { border: 0; -webkit-appearance: none; }
4、长度单位用rem
1rem = 16px;
html { <!-- 根元素 --> font-size:62.5%; } p { font-size:1rem; <!-- 字体大小等于 = 10px 16px*62.5% = 10px--> }
5、多用text-shadow这个属性,可以美化文字效果
border-radius、box-shadow、gradient、border-image,在移动端都可以很好的支持,使用这些属性可以实现很炫丽的按钮。
6、iOS中禁止用户保存图片、复制图片
img标签指定 -webkit-touch-callout:none; 可以禁止设备弹出列表按钮,这样用户就无法保存/复制你的图片。
7、禁止用户进行复制, 选择
使用 -webkit-user-select: none; user-select:none;
8、html5调用安卓或者ios的拨号功能
html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。
如下:
<ahref="tel:4008106999,1034">400-810-6999 转 1034</a>
拨打手机直接如下
<a href="tel:15677776767">点击拨打15677776767</a>
9、长时间按住页面出现闪退
element {
-webkit-touch-callout:none;
}
10、设置缓存
<meta http-equiv="Cache-Control" content="no-cache"/>
手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
11、IOS键盘字母输入,默认首字母大写
解决方案,设置如下属性
<input type="text" autocapitalize="off"/>
12、关于 iOS 系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格
可以通过正则去掉
this.value = this.value.replace(/\u2006/g,‘‘);
待续~~
以上是关于web移动端开发经验总结的主要内容,如果未能解决你的问题,请参考以下文章