IOS安卓常见问题

Posted sunjun_coder

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IOS安卓常见问题相关的知识,希望对你有一定的参考价值。

一、ios自带safari浏览器
 
1、safari不支持fixed+input输入框。
 
解决方案:
http://www.haorooms.com/post/ios_fixed_input
 
 
 
 
2、safari图片加载失败,默认图片过大。
 
解决方案:
http://www.haorooms.com/post/img_faile_jiangrong
 
 
 
3、ios默认safari浏览器对齐问题解决
 
调试方法:
 
 
二、安卓UC浏览器
 
1、安卓UC为代表的浏览器不支持部分css3属性,例如calc等 width:90%;width:calc(sdadas);
 
2、滚动事件不会触发touchmove事件
 
三、手机浏览器通用问题
 
1、弹出层touchmove滚动,会触发body滚动(出现前提是body中有滚动轴)
 
http://www.haorooms.com/post/webapp_bodyslidebcdiv
 
2、假如你整个网页用rem字体,部分安卓浏览器出现字体过大的情况。
 
3、部分安卓浏览器对margin要求比较苛刻。
 
一、关于meta
 
(一)、常用的公共meta属性
 
1、viewport
 
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
width=device-width 宽度是设备屏幕的宽度(像素)
height=device-height 高度是设备屏幕的高度(像素)
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"
 
一般只要禁用手机拨号即可
3、http-equiv
 
http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。 meat标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值"> ;
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">

(二)、IOS私有meta属性
 

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

(四)、其他浏览器私有meta属性【除非特需,一般不推荐使用】
 
1、QQ浏览器私有

全屏模式
<meta name="x5-fullscreen" content="true">

强制竖屏
<meta name="x5-orientation" content="portrait">
 

强制横屏
<meta name="x5-orientation" content="landscape">
 

应用模式
<meta name="x5-page-mode" content="app">
2、UC浏览器私有

全屏模式
<meta name="full-screen" content="yes">

强制竖屏
<meta name="screen-orientation" content="portrait">

强制横屏
<meta name="screen-orientation" content="landscape">

应用模式
<meta name="browsermode" content="application">
二、关于样式
 
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下无效。

后面一篇文章有详细介绍,地址:http://www.haorooms.com/post/phone_web_ysk
 


6、active兼容处理

<body ontouchstart="">
 

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;

以上是关于IOS安卓常见问题的主要内容,如果未能解决你的问题,请参考以下文章

IOS安卓常见问题

关于H5在安卓ios平台兼容性问题,及解决方案

关于多行文本 textarea 在ios 真机上padding相对安卓较大问题

安卓仍是移动操作系统霸主,iOS忠诚度更高!

前端面试题,移动端兼容问题都有哪些,安卓和ios问题?

安卓超越 iOS ,扔了 iPhone 吧!