稀土首推的前端移动端整理心得摘录

移动端字体单位font-size选择px还是rem

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考，适合视觉稿宽度为640px的：

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

<meta name="msapplication-tap-highlight" content="no">

IE10（winphone8）表单元素默认外观如何重置

禁用 select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

select::-ms-expand {
display: none;
}

禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
display: none;
}

禁用PC端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
display: none;
}

屏幕旋转的事件和样式

//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}

//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}

摇一摇功能


<!DOCTYPE html>
<html>
<head>
<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">
<title>demo</title>
<style>
*{padding: 0;margin: 0;}
html,body{height: 100%;}
h1{position: fixed;bottom: 0;left: 0;width: 100%;font-size: 16px;height: 30px;line-height: 30px;text-align: center;color: #FFFFFF;background-color:black;z-index: 2;}
.page{width: 100%;height: 100%;position: relative;}
[class^="page-"]{display: none;width: 100%;height: 100%;position: absolute;font-size: 30px;text-align: center;line-height: 200px;color: white;}
.show-page-1 .page-1{display: block;background-color: red;}
.show-page-2 .page-2{display: block;background-color: orange;}
.show-page-3 .page-3{display: block;background-color: purple;}
.show-page-4 .page-4{display: block;background-color: green;}
.show-page-5 .page-5{display: block;background-color: blue;}
</style>
</head>

<body>
<h1>不服你摇，看我72变</h1>
<div class="page show-page-1">
    <div class="page-1">变成猪</div>
    <div class="page-2">变成猫</div>
    <div class="page-3">变成鹅</div>
    <div class="page-4">变成羊</div>
    <div class="page-5">变成鸭</div>
</div>

<script type="text/javascript">
var shake_threshold = 1200; // 摇动的阀值
var last_update = 0;// 保存上次更新的时间
var frequency = 200;// 摇一摇的时间间隔
var x, y, z, last_x, last_y, last_z,callback; // x：横向贯穿手机屏幕 y：纵向贯穿手机屏幕 z：垂直手机屏幕
var isMotionAble = window.DeviceMotionEvent;  //判断是否支持加速度传感器
var MotionAble = {
    /**
     * 设备旋转后的回调方法
     * @method deviceMotionHandler
     * @private
     * @param {Event} eventData 事件对象
    */
    deviceMotionHandler : function(eventData){
        var acceleration = eventData.accelerationIncludingGravity;

        var curTime = +new Date;

        if (curTime - last_update > frequency) {

            var diffTime = curTime - last_update;
            last_update = curTime;

            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;

            var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;

            if (speed > shake_threshold) {
                callback && callback();
            }
            last_x = x;
            last_y = y;
            last_z = z;
        }
    },
    /**
     * 初始化摇一摇的方法
     * @method init
     * @param {Function} fn 设备摇一摇后的回调方法
     * @param {Number} [frequency:200] 检测摇一摇的时间间隔
    */
    init : function(fn,freq){
        if(isMotionAble){
            window.addEventListener("devicemotion", this.deviceMotionHandler,false);
            callback = fn;
            x = y = z = last_x = last_y = last_z = 0;
            frequency = freq||frequency;
        }
    }
}

var currentPageIndex = 1;//当前页面的索引值
var pageNum = document.querySelector(".page").children.length;
//随机显示页面
var getRandomPage = function(){
    var v = parseInt(Math.random() * pageNum) + 1;
    while(v == currentPageIndex){
        v = parseInt(Math.random() * pageNum) + 1;              
    }
    currentPageIndex = v;
    return v;
};

function showRandomTheme(index){
    currentPageIndex = getRandomPage();
    document.querySelector(".page").className = "page show-page-" + (index||currentPageIndex);

}
showRandomTheme();
var lastTime = +new Date();
MotionAble.init(
    function(){
        var now = +new Date();
        if(now - lastTime > 1000){  //一秒内只能切换一次
            showRandomTheme();
            lastTime = +new Date();
        }
    },
    200
)
</script>

</body>

</html>

取消input在ios下，输入的时候英文首字母的默认大写

android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

如何阻止windows Phone的默认触摸事件

winphone下默认触摸事件事件使用e.preventDefault是无效的

目前解决方法是使用样式来禁用 html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */

播放视频不全屏

<!--
1.目前只有ios7+、winphone8+支持自动播放
2.支持Airplay的设备（如：音箱、Apple TV)播放
x-webkit-airplay="true" 
3.播放视频不全屏，ios7+、winphone8+支持，部分android4+支持（含华为、小米、魅族）
webkit-playsinline="true" 
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

flex布局

flex布局目前可使用在移动中，并非所有的语法都全兼容，但以下写法笔者实践过，效果良好~

/* ============================================================
   flex：定义布局为盒模型
   flex-v：盒模型垂直布局
   flex-1：子元素占据剩余的空间
   flex-align-center：子元素垂直居中
   flex-pack-center：子元素水平居中
   flex-pack-justify：子元素两端对齐
   兼容性：ios 4+、android 2.3+、winphone8+
   ============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

mishe / blog