前言
关闭电话号码的自动识别:
<meta name="format-detection" content="telephone=no" />
关闭邮箱的自动识别:
<meta name="format-detection" content="email=no" />
开启电话功能:
<a href="tel:123456">123456</a>
开启短信功能:
<a href="sms:123456">123456</a>
开启长按邮箱地址弹出邮件发送的功能:
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
IOS中Safari允许全屏浏览:
<meta name="apple-mobile-web-app-capable" content="yes"/>
指定当前浏览器去模拟某个特定版本浏览器的渲染方式:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
设置视口宽度, 缩放比例:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
移动端viewport模板:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
这里开始内容
</body>
</html>
常见问题
1、移动端长度单位用rem还是vw
都可以,不过rem需要适配,就是将html根元素的字体大小,设置为整个屏幕的宽,这样1rem就等于整个屏幕的宽了。其实用vw布局更加简洁方便,100vw就是整个屏幕的宽,vw是css官方的尺寸单位,无需配置。然而vw的兼容性比rem稍差,ios8、安卓4.4及以上的才完全支持,这也是之前rem布局一直更流行的原因。不过目前ios8、安卓4.4以下的用户已经几乎没有了,从iphone4s就用ios8了,而安卓4.4是2013年底出来的,现在早就淘汰了。
2、什么是Retina 显示屏,带来了什么问题
retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样大小的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个, 在高清显示屏中的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为2倍。
应对方案:设计稿切出来的图片长宽保证为偶数,并使用backgroud-size把图片缩小为原来的一半。
// 例如图片宽高为:200px*200px,那么写法如下
.css{width: 100px; height: 100px; background-size: 100px 100px;}
其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px
.css{font-size: 20px;}
3、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0);}
4、部分android系统中元素被点击时产生的边框怎么去掉
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
有些机型去除不了, 还有个办法,不使用a或者button标签,用div模拟。
5. 禁止文本缩放
当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以这么禁止:
html {
-webkit-text-size-adjust: 100%;
}
6. 快速回弹滚动
在iOS上如果你想让一个元素拥有像Native的滚动效果,你可以这样做:
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
7. 移动端禁止选中内容
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all (移动端不需要) */
-ms-user-select: none; /* IE 10+ */
}
8. 移动端取消touch高亮效果
在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局的禁止:
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
但这个方法在三星的机子上无效,有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签,可以解决这个问题。
9. 如何禁止保存或拷贝图像(IOS)
img { -webkit-touch-callout: none; }
10. 模拟按钮hover效果
移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,无法使用css的hover, 怎么办? 设置了伪类 :active,代码如下:
<style type="text/css">
html {-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{
display:block;
height:42px;
line-height:42px;
text-align:center;
border-radius:4px;
font-size:18px;
color:#FFFFFF;
background-color: #4185F3;
}
.btn-blue:active{background-color: #357AE8;}
</style>
<div class="btn-blue">按钮</div>
11.屏幕旋转的事件和样式
事件
window.onorientationchange ,取值:正负90表示横屏模式、0和180表现为竖屏模式;
window.onorientationchange = function () {
switch (window.orientation) {
case -90:
case 90:
alert("横屏:" + window.orientation);
break;
case 0:
case 180:
alert("竖屏:" + window.orientation);
break;
}
}
样式
// 竖屏时使用的样式
@media all and (orientation: portrait) {
.css{}
}
// 横屏时使用的样式
@media all and (orientation: landscape) {
.css{}
}
12.audio元素和video元素在ios和andriod中无法自动播放
应对方案:触屏即播
$('html').on('touchstart', function () {
audio.play();
})
13.摇一摇功能
HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
14.规定上传的文件类型
通过accept属性控制
<input type=file accept="image/*"> 任何类型的图片
<input type="file" accept="image/gif, image/jpg" /> 只能gif或jpg的图片
<input type=file accept="video/*"> 任何类型的视频
<input type=file accept="audio/*"> 任何类型的音频
15、长时间按住页面出现闪退
body {
-webkit-touch-callout: none;
}
16、1px边框
在移动端中,如果给元素设置一个像素的边框,那么在手机上看起来是会比一个像素粗的,是因为移动端的设备像素比例(window.devicePixelRatio)不为1。
解决方法:
1.
window.onload = function () {
var dpr = window.devicePixelRatio;
var scale = 1 / dpr;
// 获取meta[name="viewport"]标签, 设置缩放比例。
var meta = document.querySelector('meta[name="viewport"]');
meta.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',user-scalable=no');
/*
元素宽高用rem, 1rem相当于屏幕的宽;边框的宽高还用px;
元素宽高也可用vw,用vw可以省了下面的代码,100vw等于屏幕的宽。
*/
var html = document.documentElement;
html.style.fontSize = document.documentElement.clientWidth + 'px';
}
2.
.box {
width: 200px;
height: 200px;
position: relative;
}
.box:before{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #000;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.box:before {
transform: scaleY(0.5);
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.box:before {
transform: scaleY(0.33333333);
}
}
17、pc端字体正常显示, 但ios真机就出现h1、span等标签字体比较大:
html {
-webkit-text-size-adjust: 100%;
}
18. 响应式图片
div包裹着一张图片,如果div宽度大于图片的宽度,图片被拉伸失真, 解决方法:
img {
max-width: 图片宽度;
}
19. 点透bug的产生
例如:
<div id="haorooms">点透事件测试</div>
<a href="www.jb51.net">www.jb51.net</a>
div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接,我们给div绑定tap事件:
$('#haorooms').on('tap',function(){
$('#haorooms').hide();
});
点击蒙层时div正常消失,但是在a标签上点击蒙层时,蒙层消失后a链接也会触发,这就是所谓的点透事件。
原因:
touchstart早于touchend早于click, 因为click的触发有300ms的延迟, 当tap触发之后蒙层隐藏, 此时click还没有触发,300ms之后由于蒙层隐藏,我们的click触发到了下面的a链接。
解决:
1.尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)
2.用fastclick
3.用preventDefault阻止a标签的click
20.移动端你们一般采用什么布局?移动端设计稿是多大的尺寸?
移动端布局方式: rem布局, vw布局, 弹性布局, 定宽布局。
移动端设计稿尺寸: 一般移动端设计稿是640或者750的尺寸
21. em和rem的区别
em参照自身元素的font-size大小来设置大小, 如果自身没有设置font-size,则向上查找其父级,直至有设置font-size的元素。
rem直接参照html标签字体大小,并且所有使用rem单位的都是参照html标签。
22. 移动端开发常见的兼容性问题
用同等比例的图片在PC机上很清楚,但是手机上很模糊:
是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以手机端的devicePixelRatio一般都为2。devicePixelRatio就是设备的物理像素分辨率与CSS像素分辨率的比率。
想让图片在手机里显示更为清晰,必须使用两倍的背景图。例如一个div的宽高是100x100,背景图大小必须得200x200,然后background-size:contain;,这样显示出来的图片就比较清晰了。
移动端click屏幕产生200-300 ms的延迟响应:
因为浏览器在手机端使用了双击缩放方案, 造成了300ms的延迟问题。
解决方案:
fastclick可以解决在手机上点击事件的300ms延迟, 或者通过绑定ontouchstart事件,加快对事件的响应。
触摸事件的响应顺序: ontouchstart ontouchmove ontouchend onclick
对非可点击元素(label,span)监听click事件,iso下不会触发:
css增加 cursor:pointer; 就搞定了。
固定定位布局, 键盘挡住输入框内容怎么办:
1)绑定窗口改变事件, 然后通过改变固定定位元素的位置来控制。默认键盘的宽度应该是页面的2分之一, 所以我们位移的距离为页面的二分之一就可以。
window.onresize = function () {
// $(".mian")就是固定定位的元素
if (parseInt($(".mian").css('bottom')) != 0) {
$(".mian").css('bottom', 0);
} else {
var winHeight = $(window).height();
$(".mian").css('bottom', winHeight / 2);
}
}
2)也可使用可用iScroll插件解决这个问题
消除transition闪屏:
.css{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden; /* 设置进行转换的元素的背面是否可见:隐藏 */
}
开启硬件加速, 解决页面闪白, 保证动画流畅:
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}