移动端的适配问题
使用rem 作为单位
- 使用rem作为单位,rem是根据根元素变化而变化
- 调用适配main.js(配置根元素),外加另外配置其他的css元素
html{
font-size:16px;//根元素字体为16px 即1rem = 16px
}
main.js
//动态rem
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
recalc();
})(document, window);
利用@media screen 媒体查询
- 设置头部
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- 利用@media 特性 ,根据其条件使用不用样式 具体看:
@meidia特性
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
.class {
background: #ccc;
}
}
3.link 不同设备的样式 <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)
配置不同机型的的样式
var phoneHeight = document.documentElement.clientHeight;//获取当前页面高度
var phoneWidth = document.documentElement.clientWidth;//获取当前页面宽度
if(phoneHeight / phoneWidth <1.48){
$(".classname").css({ position:"absolute",background: "blue" });
} //短屏
if(1.61< phoneHeight / phoneWidth && phoneHeight / phoneWidth<1.70){
} //正常屏
if(1.7< phoneHeight / phoneWidth && phoneHeight / phoneWidth<1.83){
} //长屏
if(phoneHeight / phoneWidth >1.89){
} //超大屏幕
常见的手机端兼容解决问题
1.手机端通过禁止移动端触屏滑动来解决弹出遮罩层,阻止页面滑动的问题 需要使用e.preventDefault();
2.解决点击遮罩层非内容区域关闭遮罩层的问题,为防止操作内容区域时,发生冒泡事件。需要禁止冒泡 e.stopPropagation()
3.苹果机型回弹背景
//select标签要设置className 为 select
//苹果回弹背景
var boo = true;
$(".select").focus(function () {
boo = false;
setTimeout(function () {
boo = true;
}, 20)
})
$(".select").blur(function () {
setTimeout(function () {
if (boo) {
$('html,body').animate({ scrollTop: 0 }, 0);
}
}, 10)
});
$("input").focus(function () {
boo = false;
setTimeout(function () {
boo = true;
}, 20)
})
$("input").blur(function () {
setTimeout(function () {
if (boo) {
$('html,body').animate({ scrollTop: 0 }, 0);
}
}, 10)
});