移动 Web 网页头部标签及CSS技巧

Question

渲染方式

<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1" />

很迷惑吧，IE定义的 meta 为啥会出现 chrome 呢？其实设置为 chrome=1 时，则会在 IE9 及以下浏览器中激活 Chrome Frame ，强制 IE 使用 Chrome Frame 渲染页面。

网页元信息

<meta name="application-name" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />

此类型 meta 使用最广泛，其中又属 keywords 和 description 这两个名称的使用率最高，是搜索引擎优化的主要手段之一，推荐大家使用。设置 keywords 和 description 这两个 meta 时，尽量使用简洁和语义明确的词语，下面的示例展示的是 BBC 新闻网站设置的 application-name、keywords 和 description 对应的 meta 信息：

<meta name="application-name" content="BBC"/>
<meta name="description" content="Breaking news, sport, TV, radio and a whole lot more. The BBC informs, educates and entertains - wherever you are, whatever your age." />
<meta name="keywords" content="BBC, bbc.co.uk, bbc.com, Search, British Broadcasting Corporation, BBC iPlayer, BBCi" />

网页缩放比例

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

initial-scale=1.0 ：设置缩放比例为1.0；
minimum-scale=1.0 和 maximum-scale=1.0 ：最小缩放比例和最大缩放比例；
user-scalable=no ：禁止用户自由缩放，user-scalable 默认值为 yes 。

识别手机号码

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

content 里面的参数：

• telephone=no 是禁止浏览器自动识别手机号码。
• email=no 是禁止浏览器自动识别 Email。

Answer 1

使用无衬线字体

font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;

禁止IOS调整字体大小

-webkit-text-size-adjust: 100% !important;

禁止选中文本

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

禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;

表明是 PC 端就固定字体大小默认 16px ，浏览器默认大小就是 16px

@media only screen and (min-width: 1024px) {
    body {
        font-size: 16px !important;
        overflow: auto !important;
    }
}

去掉webkit默认的表单样式

button,
input,
optgroup,
select,
textarea {
    -webkit-appearance: none;
}

去掉 a、input 和 button 点击时的蓝色外边框和灰色半透明背景

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

修改 webkit 中 input 的 planceholder 样式，placeholder 的文字在 ios 下可以换行，android 不行

input::-webkit-input-placeholder {
    color: #ccc;
}

修改 webkit 中 focus 状态下 input 的 planceholder 样式

input:focus::-webkit-input-placeholder {
    color: #f00;
}

隐藏 Android 的语音输入按钮

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

Answer 2

音频自动播放

document.addEventListener('touchstart', function() {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器 （webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，那么我们捕捉一次用户输入后，让音频加载实现预加载。

Answer 3

高度 100% 的渲染错误

document.documentElement.style.height = window.innerHeight + 'px';

在各移动端浏览器中经常会出现这种页面高度 100% 的渲染错误， 页面低端和系统自带的导航条重合了， 高度的不正确我们需要重置修正它，通过 JavaScript 代码重置掉。

Answer 4

设置Rem

document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth / 3.2 + "px";

在可视区宽度320px的标准模式下，3.2rem表示整个可视区的宽度，320px宽度手机3.2rem就表示320px，480px的宽度手机就3.2rem就表示480px，以此类推。

在320px的标准模式下，1rem就表示100px，默认body字体为0.14rem，14÷100=0.14，不同屏幕自动缩放大小，实现响应式。

在320px标准模式下的换算单位：1px=1/100rem=0.01rem。