您好,我们为您提供软件开发、品牌形象策划、网站建设等服务,如您有需求请咨询:13526529836
A Better Tomorrow

移动端开发之meta实用技巧

来源:河南寻唐软件科技有限公司-贺彦英 添加时间:2018/7/21 18:43:57
你还在为手机移动端web而不知所措吗?

随着互联网的发展,移动端已鲸吞蚕食成为时代的主流。“前端”这两个字对于我们这个时代并不算陌生,但是做前端的朋友们有没有对meta整理不全的,给大家整理一下手机移动端meta基础:

1. H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

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

2. 忽略将页面中的数字识别为电话号码

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

3. 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后,safari上已看不到效果 -->

4. 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

5. 取消siteapp自动转码,在全站头部加个meta

<meta http-equiv="Cache-Control" content="no-siteapp">
当然也有一个很常见的问题:就是用font-size是选择px还是rem,对于这个问题我时常也是纠结该怎么用,他们的效果是不是一样的?经过查找资料总结:对于只需要适配少部分手机设备,且分标率对页面影响不大的,使用px即可。对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。


公司地址:郑州中原国家广告产业园3号楼8楼171室 联系电话:13526529836
河南寻唐软件科技有限公司 版权所有 豫ICP备14010601号-1