移动端总结和手机兼容问题
移动端总结和手机兼容问题
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
(部分安卓手机的UC浏览器写完以后还是可以放大缩小)
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />(ios上会明显 有时候会把数字当成电话号码)
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
viewport模板
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">//主要I是强制让文档的宽度与设备宽度保持1:1,最大宽度1.0,禁止屏幕缩放。
<meta content="yes" name="apple-mobile-web-app-capable">//这个也是iphone私有标签,允许全屏浏览。
<meta content="black" name="apple-mobile-web-app-status-bar-style">//iphone的私有标签,iphone顶端状态条的样式。
<meta content="telephone=no" name="format-detection">//禁止数字自动识别为电话号码,这个比较有用,因为一串数字在iphone上会显示成蓝色,样式加成别的颜色也是不生效的。
<meta content="email=no" name="format-detection">
webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;} (ios上的下拉框会有圆角,所以要写border-radius:0)
在input框获得焦点时文字被清空用value 在input框输入文字时被清空用placeholder
webkit表单输入框placeholder的文字能换行么?ios可以,android不行~,在textarea标签下都可以换行~
html,body{
overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题,如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/
-webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况,所以需要写上*/
position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话,会出现留白*/
}
手机上的flex布局时会有兼容性问题,只用新版本的会出现安卓手机不识别的现象
.box{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
.box>li{
-webkit-box-flex: 1.0;
box-flex: 1.0;
-webkit-flex: 1.0;
flex: 1;
width: 0;/*解决兼容性问题*/
}
输入框的兼容性解决
input[type="text"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="password"]{
-webkit-appearance: none;
display: block;
width: 100%;
height: 0.8rem;
line-height:normal;/*手机上的line-height不能写成和height的值一样,会出现再次输入光标靠上的现象*/
background: none;
font-size: 0.32rem;
padding-left: 0.28rem;
border-radius: 0;
-webkit-border-radius: 0;
border: 1px solid #d5d5d5;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);/*解决加入js后input框输入瞬间变白的现象*/
}
禁用 radio 和 checkbox 默认样式
input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{
display: none;/*这样就可以用class自定义样式*/
}
webkit表单输入框placeholder的颜色值
input::-webkit-input-placeholder{color:#999;}
input:focus::-webkit-input-placeholder{color:#999;}
手机上的多行省略
.overflow-hidden{
display: box !important;
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;/*第几行出现省略号*/
/*text-align:justify;不能和溢出隐藏的代码一起写,会有bug*/
}
文本标签line-height:1或者是line-height等于height文字会被切掉
手机上浮动元素能写宽尽量写宽不然很容易出现兼容性问题,尽量不要写高,因为内容多少不固定
给不同屏幕大小的手机设置特殊样式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
<button></button>元素一定要写上type属性不然会默认提交表单,出现想不到的bug
某些安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件,这些事件会导致不能输入汉字
input框若是不想输入文字 只能读不能写可以加readonly属性
手机上用背景图写运动,如果需要背景图定位来实现运动效果可以用rem进行计算后加上basckground-size:图的个数*100% 0;
写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳
弹层的关闭事件容易触发弹层关闭后下一层的事件所以要给弹层关闭事件加上event.preventDefault()
弹层弹出后不允许屏幕滚动给弹层加mousemove事件event.preventDefault()
面包屑导航如果按照bootstrap给li加:after伪元素的话在其他浏览器和在UC浏览器中表现的不一样,UC的的会比其他的浏览器宽,所占位置更多
如果一个手机看到的和其他手机不一样 会比其他的手机大或者小,查看他的浏览器字体设置是否正常,应该是他把手机浏览的字号调小或者调大了(坑人的所谓的bug)
IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的,那么就将该元素与别的元素同级
苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
转载于:https://www.cnblogs.com/qiuchuanji/p/7842882.html
移动端总结和手机兼容问题相关推荐
- 关于移动端页面在手机调整字体大小后无法正常显示(已解决)
关于移动端页面在手机调整字体大小后内容适配的问题,作为新手我也刚好是第一次遇到, 已经完成的移动端页面,正常情况下在手机上的浏览器端和App端都可以正常显示,可当测 试把手机字体调大后,布局就忽然变乱 ...
- 解决微信端网页IOS手机的date乱码NaN问题
1.解决微信端网页IOS手机的date乱码NaN问题. IOS:Safari不兼容Javascript中的Date问题(date乱码NaN)把new Date(Date.parse(date.repl ...
- 完美实现PC端软件控制手机(无需安装任何APK)(一)
(需要了解开发细节和demo的朋友可以私信我或者加微信Kingthink) 一.背景 有一天,手机屏幕摔坏掉,我只能看那寥寥可数的开机.Power键,欲哭无泪, 我想要有一款PC端控制软件在必要时就能 ...
- 在pc端上操作手机工具分享
在pc端上操作手机工具分享 今天要跟大家分享的工具名字叫scrcpy(来源于GitHub) scrcpy可以通过usb或是(Tcp/IP)来连接安卓设备,并且不需要root权限,程序支持GNU/Lin ...
- 手机移动端web 禁止手机返回功能的最好方法,虽然很变态,但是很有效.
手机移动端web 禁止手机返回功能的最好方法 虽然很变态,但是很有效. var href = window.location.href; window.location.href = href + & ...
- 【TeamViewer Host插件】电脑端控制安卓手机(小米)【解决方案】
TeamViewer首席技术官Mike Eissele表示:"对于我们的商业客户来说,能够自由选择设备,又不必离开TeamViewer提供的支持是非常重要的." "而且, ...
- jsp页面适应手机屏幕_JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码...
手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 var phoneWi ...
- 手机整屏显示数据php,JavaScript实现移动端页面按手机屏幕分辨率自动缩放示例...
这篇文章主要介绍了移动端页面按手机屏幕分辨率自动缩放的js代码,通过阻止浏览器的默认行为各方面分析缩放的功能实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下. 手机的屏幕有大有 ...
- 移动端开发_手机快速登录
文章目录 移动端开发_手机快速登录 第一章. 需求分析 第二章. 手机快速登录 [路径] 2.1. 前台代码 2.1.1. 发送验证码 2.1.2. 提交登录请求 2.2. 后台代码 2.2.1. C ...
最新文章
- mysql如何提高其查询速度的方法
- 自制单选多选日历文本框文本域控件
- Shell中的分支语句
- 如何让你用 Python 年薪 40 万?答案早就写到 JD 上了
- 最新版Kubernetes常用命令大全
- CV方向介绍 | 基于自然语言的跨模态行人re-id的SOTA方法简述(上)
- 解决linux vi报错 Can‘t open file for writing
- 利用Simple-RTMP-Server(SRS)来进行直播
- 电脑投屏软件哪个好_无线投屏器和软件投屏的区别是什么,哪个更好用?
- 七日瘦身汤绝妙配方 - 生活至上,美容至尚!
- Wifite批量破解WEP/WPA/WPS
- 七种基本质量工具(7QC)和PDCA循环
- Linux系统装intel网卡,在Centos下安装intel网卡的方法
- 将 npm/yarn 的源地址替换成国内镜像的源地址
- 邮箱地址是什么?什么是邮箱地址?电子邮箱地址大全
- chrome谷歌浏览器安装插件
- 数字金额转换大写 先写个完整的然后将如零拾替换成零
- AI的边界在哪里?科大讯飞“上天入地”
- http://www.115ps.com/all.html,Tynamo
- 三维匹配_三维GIS数据融合的基本方法与进展
热门文章
- Netty基本使用流程代码
- 【BLE】TLSR8258开发记录之12--手机扫描蓝牙显示中文
- HDU 1232畅通工程
- [YTU]_2446( C++习题 输入输出--私有继承)
- Python re(正则表达式)简明教程
- rectint 函数
- A除以B (20) (模拟除法)
- 12.1简介Object类
- matlab关于噪声课设,基于matlab的有噪声的语音信号处理的课程设计.doc
- 【电磁场实验作业】有限差分法(FDM)求解静电场电位分布