IOS安卓常见问题

时间 2019-12-01

标签 ios 常见问题栏目 iOS 繁體版

原文原文链接

1、IOS自带safari浏览器

一、safari不支持fixed+input输入框。

解决方案：

http://www.haorooms.com/post/ios_fixed_input

二、safari图片加载失败，默认图片过大。

解决方案：

http://www.haorooms.com/post/img_faile_jiangrong

三、ios默认safari浏览器对齐问题解决

调试方法：

2、安卓UC浏览器

一、安卓UC为表明的浏览器不支持部分css3属性，例如calc等 width:90%;width:calc(sdadas);

二、滚动事件不会触发touchmove事件

3、手机浏览器通用问题

一、弹出层touchmove滚动，会触发body滚动（出现前提是body中有滚动轴）

http://www.haorooms.com/post/webapp_bodyslidebcdiv

二、假如你整个网页用rem字体，部分安卓浏览器出现字体过大的状况。

三、部分安卓浏览器对margin要求比较苛刻。

1、关于meta

（一）、经常使用的公共meta属性

一、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 用户是否能够手动缩放

二、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"

通常只要禁用手机拨号便可

三、http-equiv

http-equiv顾名思义，至关于http的文件头做用，它能够向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞；

（二）、IOS私有meta属性

（四）、其余浏览器私有meta属性【除非特需，通常不推荐使用】

一、QQ浏览器私有

全屏模式

强制竖屏

强制横屏

应用模式

二、UC浏览器私有

全屏模式

强制竖屏

强制横屏

应用模式

2、关于样式

一、上下拉动滚动条时卡顿、慢

body {

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

}

二、禁止复制、选中文本

Element {

-webkit-user-select: none;

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

}

解决移动设备可选中页面文本(视产品须要而定)

三、长时间按住页面出现闪退

element {

-webkit-touch-callout: none;

}

四、iphone及ipad下输入框默认内阴影

Element{

-webkit-appearance: none;

}

五、ios和android下触摸元素时出现半透明灰色遮罩

Element {

-webkit-tap-highlight-color:rgba(255,255,255,0)

}

设置alpha值为0就能够去除半透明灰色遮罩，备注：transparent的属性值在android下无效。

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

六、active兼容处理

七、动画定义3D启用硬件加速

Element {

-webkit-transform:translate3d(0, 0, 0)

transform: translate3d(0, 0, 0);

}

注意：3D变形会消耗更多的内存与功耗

八、Retina屏的1px边框

Element{

border-width: thin;

}

九、旋转屏幕时，字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

-webkit-text-size-adjust:100%;

}

十、transition闪屏

/设置内嵌的元素在 3D 空间如何呈现：保留3D /

-webkit-transform-style: preserve-3d;

/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /

-webkit-backface-visibility:hidden;

十一、圆角bug

某些Android手机圆角失效

background-clip: padding-box;

1. iOS-常见问题
2. IOS常见问题
3. 安卓 ADB常见问题整理
4. 【Unity】打包安卓APK常见问题
5. 安卓so包常见报错问题
6. 安卓常见的全部问题
7. ios 常见问题解决
8. iOS常见问题(3)
9. iOS开发常见问题
10. iOS常见问题(2)
更多相关文章...
• Markdown 标题 - Markdown 教程
• jQuery Mobile 主题 - jQuery Mobile 教程
• PHP Ajax 跨域问题最佳解决方案
• IntelliJ IDEA中SpringBoot properties文件不能自动提示问题解决