一、移动端的自适应
自适应的方法
以前刚接触写移动端页面的时候,对多个手机屏幕尺寸的适配问题会感到疑惑,在网上查看了各种解决方案后,最终决定采用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标签大家可以选取自己需要的。