最近接触了移动端开发，将开发中遇到的一些相关知识点记下来。

viewport，页面比例初始化，禁止页面的缩放行为

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

页面宽度为设备宽度，高度为设备高度，初始缩放1倍，最大缩放1倍，最小缩放1倍， 禁止用户缩放行为
user-scalable=no也可以写成user-scalable=0

禁止iPhone浏览器下电话号码可以点击拨号

<meta name = "format-detection" content = "telephone=no">

如果禁止点击后，有个别地方需要设置回原来的拨打电话，则可以这样写

<a href = "tel:13800000000">call 13800000000</a>

或者用js:

location.href = 'tell:10086'

在移动端，触发点击事件时（超链接或者click事件）会有高亮的背景框来表示点击的响应，可以将其透明掉不显示：

-webkit-tap-highlight-color: rgba(0,0,0,0);
// 或者
-webkit-tap-highlight-color: transparent;

限制用户只能输入纯文本（指不带有样式，比如复制粘贴来的文本可能字体字号颜色等样式不一样）

p {-webkit-user-modify: read-write-plaintext-only;}

使用user-modify

-webkit-user-modify: read-only | read-write | read-write-plaintext-only  /*只读|可读写|可读写，内容只能是纯文本*/

禁止用户进行文本选择

-webkit-user-select: none;
user-select: none;

制作半像素边框

移动端下使用border: 1px solid #ccc;不一定就能产生1像素的边框线，有些手机会显示成比1像素粗的边框，可以通过伪类来做边框，可以做成比1像素纤细的半像素的下边框：

.border-bottom {
    position: relative;

    &:after {
        position: absolute;
        content: "";
        display: block;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #ccc;
        -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
    }
}

取消输入框、文本框默认聚焦样式

input:focus, textarea:focus {outline: none;}

使用localStorage

localStorage.setItem('title', 'hello');
var title = localStorage.getItem('title');
// 移除
localStorage.removeItem('title');

焦点

// 获取当前焦点
var ele = document.activeElement;
// 滚到焦点处
document.activeElement.scrollIntoViewIfNeeded();

修改选中文本的样式

使用:selection选择器

:selection: {
    background-color: #fffaf4;
}

触摸事件

var ele = document.querySelector('#tab');
ele.addEventListener('touchStart', function(e) {
    e.preventDefault();
    touch = e.touches[0];
    var x = touch.pageX;
    var y = touch.pageY;
});

使用媒体查询来实现响应式布局

下面代码表示小于等于980px的屏幕，如果符合查询条件，则在@media里面定义的样式会覆盖之前的样式，要写的好不容易，写的时候还需要特别注意css的优先级。

@media screen and (max-width: 980px) {
    // css code
}

弹性盒子布局

display: -webkit-box;
display: box;