移动端自适应以及部分meta标签的介绍

一、移动端的自适应

自适应的方法

以前刚接触写移动端页面的时候，对多个手机屏幕尺寸的适配问题会感到疑惑，在网上查看了各种解决方案后，最终决定采用rem布局。

我用的是某位大神提供的方法来做到自适应，只需要引入相关的文件，进行设置就可以使用了，里面有详细的介绍。
参考链接：http://caibaojian.com/simple-flexible.html

该方法使用简单，在编写代码时参照设计图100px写成1rem。比如有个元素宽100px高50px,我们可以写成width: 1rem;height: 0.5rem;

注意点

在之前的使用过程中碰到过一些问题，比如写一个元素的border为1px，按照该自适应方法要写成0.01rem，结果在某些手机上该边框不可见，遇到这种情况还是要写成1px。

当一个元素宽度很宽时，为避免屏幕小的手机出现横向滚动条或者显示不全的问题，这时候宽度大小建议使用百分比，例如宽度超出屏幕一半的元素。

二、meta标签

在上面参考链接里提供了一个基本的HTML模板，接下来对里面用到的meta标签做介绍。

<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">
<meta name="description" content="不超过150个字符"/>
<meta name="keywords" content=""/>
<meta content="caibaojian" name="author"/>

<meta charset="utf-8">

设置页面的编码格式为"utf-8"

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

一般来说，在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内。

width:可视区域的宽度，这里的device-width指设备宽度
initial-scale：初始的缩放比例
maximum-scale：允许用户缩放到的最大比例
user-scalable:用户是否可以手动缩放，no 禁止缩放

<meta content="yes" name="apple-mobile-web-app-capable">

ios启用 webapp 模式, content值为yes时会隐藏工具栏和菜单栏

<meta content="black" name="apple-mobile-web-app-status-bar-style">

ios设置状态栏的背景颜色为黑色

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

在浏览器页面中出现的手机号码将不以拨号的超链接的形式出现

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

不识别页面中出现的邮箱

<meta name="description" content="不超过150个字符"/>

页面描述

<meta name="keywords" content=""/>

页面关键词

<meta content="caibaojian" name="author"/>

页面作者

三、总结

关于移动端的自适应建议采用该rem布局结合百分比来使用，页面上的meta标签大家可以选取自己需要的。