移动开发XX问题解决

关于meta

(一) 常用的公共meta属性

1.viewport

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

width=device-width 宽度是设备屏幕的宽度(像素)
height=device-width 高度是屏幕的高度
initial-scale 初始缩放比例
minimum-scale 允许用户缩放最小比例
maximum-scale 允许用户缩放的最大比例
user-scalable 用户是否可以手动缩放

2.format-detection

format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置:

meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"

也可以连写:

meta name="format-detection" content="telephone=no,email=no,adress=no"

下面具体说下每个设置的作用:

一、telephone

你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:
telephone=no就禁止了把数字转化为拨号链接!
telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

二、email

告诉设备不识别邮箱,点击之后不自动发送
email=no禁止作为邮箱地址!
email=yes就开启了把文字默认为邮箱地址,这个meta就不用写了,在默认是情况下就是开启!

三、adress

adress=no禁止跳转至地图!
adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!

3.http-equiv

这个属性html5并不能很好的支持, 一般手机网页都是有一定缓存的, 所以这个一般不用设置.

(二) iOS私有属性

<meta name="apple-mobile-web-app-title" content="标题">添加到主屏后的标题(iOS 6 新增)
<meta name="apple-mobile-web-app-capable" content="yes" />是否启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />设置状态栏的背景颜色

只有在 “apple-mobile-web-app-capable” content=”yes” 时生效

content 参数:

default 默认值。

black 状态栏背景是黑色。

black-translucent 状态栏背景是黑色半透明。

设置为 default 或 black ,网页内容从状态栏底部开始。

设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡

IOS主屏幕图标设置
<link href="apple-touch-icon" href="touch-icon-iphone.png"/>
<link href="apple-touch-icon-precomposed" href="touch-icon-iphone.png"/>

两者的区别是第二种有IOS6那种半透明样式

启动画面的设置
<link rel="apple-touch-startup-image" href="xxx.png"/>

二、关于样式

1、上下拉动滚动条时卡顿、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
2、禁止复制、选中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
解决移动设备可选中页面文本(视产品需要而定)
3、长时间按住页面出现闪退
element {
-webkit-touch-callout: none;
}
4、iphone及ipad下输入框默认内阴影
Element{
-webkit-appearance: none;
}
5、ios和android下触摸元素时出现半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。
6、active兼容处理
7、动画定义3D启用硬件加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意:3D变形会消耗更多的内存与功耗
8、Retina屏的1px边框
Element{
border-width: thin;
}
9、旋转屏幕时,字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
10、transition闪屏
/设置内嵌的元素在 3D 空间如何呈现:保留3D /

-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见:隐藏 /

-webkit-backface-visibility:hidden;
11、圆角bug

某些Android手机圆角失效

background-clip: padding-box;
分享到