HTML代码优化记录

由于最近频繁对主题进行升级，这就自然导致，在制作过程发现了以前从来没有注意到过的问题，这里总结记录下：

控制移动页面缩放

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

详细说明：
width：可视区域的宽度，值可为数字或关键词device-width；
height：同width；
intial-scale：页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放；
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别；
maximum-scale：用户可将页面放大的程序，1.0 将禁止用户放大到实际尺寸之上；
user-scalable：是否可对页面进行缩放，no 禁止缩放

iOS 中页面自定义字体

以前我的移动端页面，对于 font-family 的定义才用的是 serif。可是为了在 PC 上阅读舒服点，多加了一个雅黑字体。但是在这次升级主题中发现，定义了 serif 后在 iOS 9 以上版本中显示的英文字体居然是衬线字体。研究了半天查了好多资料发现：

body
{
    font-family: Helvetica, Arial, "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "tohoma,sans-serif";
}

详细说明：
其中PingFang SC这个是关键，添加到body中即可解决

去除移动端链接被点击时产生的高亮效果

a, button, input
{
    -webkit-tap-highlight-color: rgba(255,0,0,0);
}

禁用 webkit 浏览器内链接长按时的弹窗

html, body
{
    -webkit-touch-callout: none;
}

CSS3 实现渐变背景

body
{
    background: -webkit-linear-gradient(#a9cae8 0, #4187eb 25%, #7baaea 100%);
    background: -moz-linear-gradient(#a9cae8 0, #4187eb 25%, #7baaea 100%);
    background: linear-gradient(#a9cae8 0, #4187eb 25%, #7baaea 100%);
}

自适应

@media screen and (max-width:640px)
{
    /* 你所想要的css代码*/
}

重定义 placeholder 样式

search-bar::-webkit-input-placeholder
{
    /*你所想要的重定义代码 */
}