67.web--手机端兼容性问题
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">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<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;
67.web--手机端兼容性问题的更多相关文章
- PHP判断客户端是PC web端还是移动手机端方法
PHP判断客户端是PC web端还是移动手机端方法需要实现:判断手机版的内容加上!c550x260.jpg后缀变成缩略图PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 ...
- web端和手机端测试有什么不同
面试中经常被问到web端测试和手机端测试有什么相同点和区别呢?现在总结一下这个问题,如有不对敬请指正 web端和手机端测试有什么区别 1.相同点 不管是web测试还是手机App测试,都离不开测试的相关 ...
- 七牛用户如何将视频转码成普清高清来适应不同的手机端或者web端
Qiniu 七牛问题解答 非常多人会用到七牛视频转码问题,要将视频转码成适用于各种终端的视频,也有的用户对转码服务的码率,帧率,分辨率等理解不多.不知道该怎样设置这些參数.以下我给大家科普一下. 问题 ...
- 利用firefox调试安卓手机端web
分2部分: 手机: 1.安装最新版firefox 2.打开浏览器,输入about:config 3.设置 devtools.debugger.remote-enabled 值为true devtool ...
- PHP 判断手机端还是web端
function isMobile(){ // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) re ...
- 【web前端】移动端控制台插件,手机端页面查看相关页面控制台信息
一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...
- 纯web实现游记类手机端应用
初衷 当初的一个学习框架项目,采用sui框架实现的一套手机端页面.今天清理github的时候重新整理了一下,因为设计的确实不错嘛,拿出来大家一起学习...哈哈 说明 采用sui框架 纯html/css ...
- 手机端网页web开发要点
1.初始化 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- js 判断pc端或手机端
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...
- 判断Http请求由手机端发起,还是有电脑端发起
某些情形,我们需要判断Http请求是来自手机端还是电脑端,关键是取得User-Agent的信息,进行筛选判断即可. 核心类如下: public static boolean isMobileDevic ...
随机推荐
- sklearn交叉验证2-【老鱼学sklearn】
过拟合 过拟合相当于一个人只会读书,却不知如何利用知识进行变通. 相当于他把考试题目背得滚瓜烂熟,但一旦环境稍微有些变化,就死得很惨. 从图形上看,类似下图的最右图: 从数学公式上来看,这个曲线应该是 ...
- 咸鱼入门到放弃6--jsp<一>三指令
JSP全称是Java Server Pages 它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术.JSP这门技术的最大的特点在于,写jsp就像在写html,但它相比htm ...
- .net 本地日志的添加
/// <summary> /// 写入日志到文本文件 /// </summary> /// <param name="userName">用户 ...
- c++sort函数的使用总结
sort类函数: 函数名 功能描述 sort 对给定区间所有元素进行排序 stable_sort 对给定区间所有元素进行稳定排序 partial_sort 对给定区间所有元素部分排序 partial_ ...
- MD5加密工具类
简单的md5加密: package com.util; import java.security.MessageDigest; import java.security.NoSuchAlgorithm ...
- BZOJ.4942.[NOI2017]整数(分块)
BZOJ 洛谷 UOJ 可能是退役之前最后一个BZOJ rank1了? 参考这里. 如果没有减法,对一个二进制数暴力进位,均摊复杂度是\(O(1)\)的(要进\(O(n)\)次位就至少需要\(O(n) ...
- 【整理】Java 8新特性总结
闲语: 相比于今年三月份才发布的Java 10 ,发布已久的Java 8 已经算是老版本了(传闻Java 11将于9月25日发布....).然而很多报道表明:Java 9 和JJava10不是 LTS ...
- (转)RBAC权限模型——项目实战
一.前言 权限一句话来理解就是对资源的控制,对web应用来说就是对url的控制,关于权限可以毫不客气的说几乎每个系统都会包含,只不过不同系统关于权限的应用复杂程序不一样而已,现在我们在用的权限模型基本 ...
- centos+git+gitolite 安装和部署
一.部署环境 系统:CentOS 6.4x64 最小化安装 IP:192.168.52.131 git默认使用SSH协议,在服务器上基本上不用怎么配置就能直接使用.但是如果面向团队服务,需要控制权限的 ...
- 男默女泪,ArcGIS AddIN 编辑逻辑赏析,走过路过,不要错过
看到了一段ESRI写的一个工具,我反编译了一下,学习工具中的几个代码片段 一. IEditTask task = (this._editor as IEditTaskSearch).get_TaskB ...