移动端开发兼容性处理整理
【UC浏览器】video标签脱离文档流
场景:<video>标签的父元素(祖辈元素)设置transform样式后,<video>标签会脱离文档流。
测试环境:UC浏览器 8.7/8.6 + Android 2.3/4.0 。
Demo:http://t.cn/zj3xiyu
解决方案:不使用transform属性。translate用top、margin等属性替代。
【UC浏览器】video标签总在最前
场景:<video>标签总是在最前(可以理解为video标签的z-index属性是Max)。
测试环境:UC浏览器 8.7/8.6 + Android 2.3/4.0 。
【UC浏览器】position:fixed 属性在UC浏览器的奇葩现象
场景:设置了position: fixed 的元素会遮挡z-index值更高的同辈元素。
在8.6的版本,这个情况直接出现。
在8.7之后的版本,当同辈元素的height大于713这个「神奇」的数值时,才会被遮挡。
测试环境:UC浏览器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。
Demo:http://t.cn/zYLTSg6
【QQ手机浏览器】不支持HttpOnly
场景:带有HttpOnly属性的Cookie,在QQ手机浏览器版本从4.0开始失效。JavaScript可以直接读取设置了HttpOnly的Cookie值。
测试环境:QQ手机浏览器 4.0/4.1/4.2 + Android 4.0 。
【MIUI原生浏览器】浏览器地址栏hash不改变
场景:location.hash 被赋值后,地址栏的地址不会改变。
但实际上 location.href 已经更新了,通过JavaScript可以顺利获取到更新后的地址。
虽然不影响正常访问,但用户无法将访问过程中改变hash后的地址存为书签。
测试环境:MIUI 4.0
【Chrome Mobile】fixed元素无法点击
场景:父元素设置position: fixed;
子元素设置position: absolute;
此时,如果父元素/子元素还设置了overflow: hidden 则出现“父元素遮挡该子元素“的bug。
视觉(view)层并没有出现遮挡,只是无法触发绑定在该子元素上的事件。可理解为:「看到点不到」。
补充: 页面往下滚动,触发position: fixed;的特性时,才会出现这个bug,在最顶不会出现。
测试平台: 小米1S,Android4.0的Chrome18
demo: http://maplejan.sinaapp.com/demo/fixed_chromemobile.html
解决办法: 把父元素和子元素的overflow: hidden去掉。
本文链接:http://www.cnblogs.com/maplejan/archive/2013/04/26/3045928.html
作者:Maple Jan
移动端开发兼容性处理整理【二】
一. css部分
- body如果设置height:100%;overflow:hidden是依然可以滑动的,如果需禁止,要再加一层div设置 height:100%加overflow:hidden(html,body加height:100%) ,这样元素超出body的高度也不能滑动了。
或者同时给html,body加height:100%;overflow:hidden meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>移动端加上这个标签才是真正的自适应,不加的话,假如你把一个980px宽度(手机端常规是980)的PC网页放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应缩小了(980px是相对于手机像素的,我的是超过1000px多一些就出现滚动条了,这个没具体研究)。
关于 initial-scale=1 ,这个参照iphone5的尺寸320*568,如果你页面按照640*1136做的话,scale就设为0.5
<meta content="yes" name="apple-mobile-web-app-capable"> IOS中safari允许全屏浏览
<meta content="black" name="apple-mobile-web-app-status-bar-style"> IOS中Safari顶端状态条样式
<meta content="telephone=no" name="format-detection"> 忽略将数字变为电话号码
<meta content="email=no" name="format-detection"> 忽略识别email
- 做全屏显示的图片时,一般为了兼容大部分的手机,图片尺寸一般设为640*960(我是觉得这个尺寸好,也看不少的图片也是这个尺寸,视情况而定)
去除webkit的滚动条
element::-webkit-scrollbar{
display: none;
}
去除button在ios上的默认样式
-webkit-appearance: none;
border-radius: 0
不想让按钮touch时有蓝色的边框 -webkit-tap-highlight-color:rgba(0,0,0,0);
如果要用到fixed譬如导航等,可以用absolute达到一样的效果,把body设为100%;将元素absolute到body上即可,不过这样不能让body滚动,如果需要有滚动的地方,就放在div中滚动
在移动端做动画效果的话,如果通过改变绝对定位的top,或者margin的话做出来的效果很差,很不流畅,而使用css3的transition或者animation的效果将会非常棒(这一方面IOS比android又要好不少)。
如果用translate3d来实现动画,会开启GPU加速,硬件配置差的安卓用起来会耗性能,需慎用(借用1楼评论的)使用图片时,会发现图片下总是有大概4px的空白,(原因据说图片是inline,触发baseline什么的。。。)常用解决方法有
img{display:block};
img{vertical-align:top}也可取其他几个值,视情况而定
其他解决办法 见此
学会使用display:-webkit-box的布局,能很好地帮我们做到页面自适应,譬如 导航栏 这些个人觉得特别适合,具体使用方法此处不叙述
使用 a 标签的话,尽量让 a 标签 block ,尽量让用户可点击区域最大化
两个页面使用了transform之后,页面下的z-index有时就会失效,我遇到过,但没去认真探究,只是把z-index提高就好了,如果遇到这个问题的,详细可以 看这
在iOS中,当你点击比如 input 准备输入时,虚拟键盘弹出,整个视窗的 高度 就会变为 减去键盘 的高度,加入你在底部有fixed的元素比如btn,这个元素就会跑上来,一般都不会太美观。我是当focus时就把它设为absolute,视情况而定
禁止用户选中文字 -webkit-user-select:none
当你把input设为 width:100%时,有时可能会遇到input的宽度超出了屏幕,这时可对input加一个属性 box-sizing:border-box
关于box-sizing:border-box,此属性是把边框的高宽包含在盒子的高宽中,假如你设置两个元素float且各占50%,又都有border时,用这个属性就可以完美地让它们能显示在同一行
要table的td用col设置了宽度后超出部分隐藏的话给table加属性table-layout:fixed(固定宽度布局)
如果想改变 placeholder 里的样式,需要用css伪类。 如 ::-webkit-input-placeholder{color:#ccc}
- 做一个方向箭头比如 “>” 时,可以用一个正方形的div,设置border:1px 1px 0 0;然后rotate(45deg)
CSS权重:style是1000,id是100,class是10,普通如li、div和伪类是1,通用如*是0;
- 使用rem时,设某个div比如的height:3rem;line-height:1.5rem;overflow:hidden;时,在某些android手机上可能会出现显示不止两行,第三行会显示点头部。 解决:利用js获取文字line-height再去设置div高度
二. JS部分
如果使用jquery绑定touch事件的话,获取touchstart,touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX,获取touchend则用 e.originalEvent.changedTouches[0].pageX
利用style获取获取transform的rotate值
parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1])
如果页面一开始没有style值,rotate是写在CSS里的,需要用到getComputedStyle,具体请看这里。
有些版本的iphone4中, audio和video默认播放事件不会触发,比如使用window.onload或计时器等都不能触发播放,必须用JS写事件让用户手动点击触发才会开始播放
想要在touchmove:function(e,参数一)加一个参数,结果直接使用e.preventDefault()就会 e 报错,处理方法为
touchmove:function(e,参数一){
var e=arguments[0]
e.preventDefault()
}
HTML5的新js API有新的选择器,比如querySelector(".class #id")和querySelectorAll(".class element")。
点击一个元素时,使用touchstart会立即触发,而使用click则用有大概0.3s的延迟
- 用e.preventDefault()会阻止的scroll,click等事件
三. 微信部分
判断是否来自微信浏览器
function isFromWeiXin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
}
return false;
}
判断手机的类型
var user="";
if (/android/i.test(navigator.userAgent)){
// android
user="1";
}
if (/ipad|iphone|mac/i.test(navigator.userAgent)){
// ios
user="0";
}
微信浏览器里均不能打开下载的链接,需在浏览器打开
如果在网页里嵌套一个iframe,src为其他的网址等,当在微信浏览器打开时,如果irame里的页面过大,则iframe的src不能加载(具体多大不知道,只是遇到过)
- 微信升级到6.0后,在微信网页里需要用到设置分享的标题等,需要用到JSSDK,同时去微信公众平台里绑定里放置网页的域名。
不过JSSDK也不是所有问题都解决了,在android里点击分享到朋友圈时就触发了分享成功的回调函数,即使取消分享也已经触发了成功的函数(现在不知道是否有修复,如果遇到了这类问题,应该就是这个原因) - 来源 http://www.cnblogs.com/zhaodawei/p/4275455.html
转载于:https://www.cnblogs.com/kelly-sunshine/p/10762750.html
移动端开发兼容性处理整理相关推荐
- 移动端页面兼容性问题解决方案整理(一)
移动端页面兼容性问题解决方案整理(一) 参考文章: (1)移动端页面兼容性问题解决方案整理(一) (2)https://www.cnblogs.com/changningios/p/6486610.h ...
- H5和PC端开发差异对比
移动端开发现状 移动web 开发指的是需要适配移动设备的网页开发 移动web开发与pc端web开发没有本质的区别,使用的还是HTML/CSS/JavaScript的技术 移动端与pc端 web开发的区 ...
- H5手机移动端开发常用资源整合
在移动端开发中需要考虑的问题比较多,常见的资源以及移动端需要注意的地方整理出来了,这是篇转载的文章,写的比较全面,分享给大家. 头部meta基础知识介绍 H5页面窗口自动调整到设备宽度,并禁止用户缩放 ...
- 移动端开发 rem 单位使用问题
前言 PC 端页面开发与移动端页面开发: PC 端页面开发需要考虑更多的兼容性问题,ie.谷歌.火狐等浏览器各自内核不同(ie 的天下). 移动端页面开发基本不用考虑这种浏览器间的兼容问题,手机上的浏 ...
- Web开发兼容性系列文章(一):不同设备浏览器的userAgent值大全
Web开发兼容性系列文章(一):不同设备浏览器的userAgent值大全 Posted on 2011-07-22 12:37 随它去吧 阅读(1388) 评论(11) 编辑 收藏 http://ww ...
- 移动端 c++ 开发_这 10 点值得移动端开发重点学习
大家好,我是拭心,最近有朋友问我:"安卓开发是不是没人要了,除了画 UI 别的都不会怎么办?" 考虑到这可能是很多人共同的疑问,决定简单写一下. 不是安卓开发没人要了,是初级安卓没 ...
- 01-移动端开发教程-CSS3新特性(上)
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- 计算机网络拓跋结构,实战 | 服务端开发与计算机网络结合的完美案例
前言 大家好,我是阿秀 后端,可以说是仅次于算法岗之外竞争最为激烈的岗位,而其中的服务端开发也是很多人会选择在秋招中投递的一个岗位,我想对于很多人来说,走上服务端开发之路的起点就是一个回声服务器了. ...
- flutter 自定义键盘_掘金 AMA:听闲鱼客户端架构师邬吉风聊 Flutter 和移动端开发那些事...
第二十一期 AMA 掘金团队请来了闲鱼客户端架构师,<Fish-Redux>作者-- 邬吉风做了为期三天的 Ask Me Anything (AMA) 活动(活动已结束).我们在此精选了一 ...
- 送给即将春秋招的同学--一名服务端开发工程师的校招面经总结
前言:作为一名21年大学毕业的Java服务端开发工程师,从19年10月份(大三上)开始进行日常实习面试,期间获得小米.快手.领英.Tencent等offer,因疫情爆发无法准时入职,20年3月份春招成 ...
最新文章
- 物联网改变生活——飞思卡尔技术论坛中国站侧记
- mysql查看表的两列_MySQL查询来计算表列中的0和1的数量,并在两列中显示?
- 2019-03-15-算法-进化(两数之和)
- python协程等待执行完成_当循环运行时,如何运行协同程序并等待同步函数的结果?...
- Android平台RTMP/RTSP播放器开发系列之解码和绘制
- 【Java从0到架构师】MySQL 基础
- 安装ISA2004后,加入域时提示:远程过程调用失败且未运行的解决办法
- 【渝粤教育】国家开放大学2018年春季 0579-21T电路及磁路(2)(一) 参考试题
- 省选专练之后缀自动机zoj1729 Hidden Password
- DOM事件学习之兼容中文输入法
- UI自动化---Wechat批量表情包轰炸
- 微服务网关——设计篇
- android 版本更新 静默安装及自启动
- 七个习惯之一:积极主动
- 南大计算机系统基础CMU‘s CSAPP——第一章
- 手机注册获取验证码的PHP代码
- 手机app访问服务器数据库数据库文件夹,手机app怎么访问服务器数据库
- 4k显示器如何解决分辨率,和桌面图标与应用程序界面,显示太小的问题
- android saf 打开指定目录,并操作相关文件
- (原創) 楚漢相爭之我見 (日記)
热门文章
- 七夕节,我用代码制作了表白信封
- Objective C的关键字oneway
- HDFS与HBASE的动态节点的扩容(增删)小白级(二)
- DirextX Training笔记
- java设置手机后台进程限制_当应用程序在Android Pie上受到后台限制时启动前台服务...
- 【C1认证任务】C1-4
- 特斯拉“深陷”召回/监管调查,“高田气囊门”是前车之鉴
- #Geek Founders# 蒋涛的 CES 2016 感受 - Day 4 (总结版)
- java毕业设计校园服装租赁系统mybatis+源码+调试部署+系统+数据库+lw
- hexo yilia个性化样式设置