1.border-radius百分比失效 解决办法:设置一个较大值如border-radius:9999px
2.placeholder属性设置的文字向上偏移的厉害 解决办法:line-height:normal
3.webkit上的input,button,及select的默认样式可以通过以下代码禁用,然后自定义。 解决办法:-webkit-appearance:none;
4.body设置100%高度后,在移动浏览器里面可能会被底部的导航栏挡住: 解决办法:document.documentElement.style.height = window.innerHeight + 'px'
5.字体设置建议 建议:
body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }
6.安卓浏览器看背景图片,有些设备会模糊
想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍)。例如一个div的宽高是100100,背景图必须得200200,然后background-size:contain;,这样显示出来的图片就比较清晰了。
代码可以如下:
或者指定 background-size:contain;都可以,大家试试!
7.apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。
<meta name="apple-mobile-web-app-capable" content="yes">
8.format-detection 启动或禁用自动识别页面中的电话号码。
<meta name=
"format-detection"
content=
"telephone=no"
>
说明:
默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
9.html5调用安卓或者ios的拨号功能
<
a
href
=
"tel:4008106999,1034"
>400-810-6999 转 1034</
a
>
10.上下拉动滚动条时卡顿、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
11.长时间按住页面出现闪退
element {
-webkit-touch-callout: none;
}
12.iphone及ipad下输入框默认内阴影
Element{
-webkit-appearance:
none
;
}
13.ios和android下触摸元素时出现半透明灰色遮罩
设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。
14.旋转屏幕时,字体大小调整的问题
html, body, form, fieldset, p, div, h
1
, h
2
, h
3
, h
4
, h
5
, h
6
{
-webkit-text-size-adjust:
100%
;
}
15.transition闪屏
/设置内嵌的元素在
3
D 空间如何呈现:保留
3
D /
-webkit-transform-style: preserve
-3
d;
/ 设置进行转换的元素的背面在面对用户时是否可见:隐藏 /
-webkit-backface-
visibility
:
hidden
;
16.圆角bug
某些Android手机圆角失效
17.顶部状态栏背景色
<
meta
name
=
"apple-mobile-web-app-status-bar-style"
content
=
"black"
/>
除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。
如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。
18. 设置缓存
<
meta
http-equiv
=
"Cache-Control"
content
=
"no-cache"
/>
手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。19.浏览器私有及其它meta
全屏模式
强制竖屏
强制横屏
应用模式
UC浏览器私有
全屏模式
强制竖屏
强制横屏
应用模式
其它
针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
微软的老式浏览器
windows phone 点击无高光
20. IOS中input键盘事件keyup、keydown、keypress支持不是很好
解决办法:
可以用html5的oninput事件去代替keyup
21. h5网站input 设置为type=number的问题h5网页input 的type设置为number一般会产生三个问题,一个问题是maxlength属性不好用了。另外一个是form提交的时候,默认给取整了。三是部分安卓手机出现样式问题。
<input type=
"number"
oninput=
"checkTextLength(this ,10)"
>
function
checkTextLength(obj, length) {
if
(obj.value.length > length) {
obj.value = obj.value.substr(0, length);
}
}
因为form提交默认做了表单验证,step默认是1,要设置step属性,假如保留2位小数。
关于step,我在这里做简单的介绍,input 中type=number,一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01。
22. 去除input默认样式
<
input
type
=
"number"
step
=
"3.1"
min
=
"1"
/>
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance:
none
;
margin
:
0
;
23.ios 设置input 按钮样式会被默认样式覆盖}
input,
textarea {
border: 0;
-webkit-appearance: none;
24. IOS键盘字母输入,默认首字母大写}
<
input
type
=
"text"
autocapitalize
=
"off"
/>
<
input
type
=
"number"
step
=
"3.1"
min
=
"1"
/>
|