移动端web头部header通用写法-蓝天上的青鸟-ChinaUnix博客

已关闭shenliyang.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

蓝天上的青鸟

博客访问： 707784
博文数量： 143
博客积分： 1554
博客等级：上尉
技术积分： 1767
用户组：普通用户
注册时间： 2011-04-10 11:50

文章分类

全部博文（143）

PHP/Shell（35）
数据库（33）
NOSQL（7）
安全（22）
缓存（1）
监控（4）
网站（12）
虚拟化/集群（9）
优化（1）
服务（12）
云技术（2）
移动APP（1）
其他（2）
python（1）
前端HTML/CSS/Js（1）
未分配的博文（0）

文章存档

2017年（2）

2016年（5）

2015年（16）

2014年（25）

2013年（27）

2012年（16）

2011年（52）

我的朋友

最近访客

推荐博文

移动端web头部header通用写法

分类： Html/Css

2016-04-11 11:55:41

1.head部分通用写法；网上也有，不过有的可有有的可无；原理是兼容IOS透明栏目等问题，再者就是viewport（关键）

点击(此处)折叠或打开

<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<meta name="format-detection" content="telphone=no, email=no"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>web前端-马乐</title>
</head>

2.引入引用flexible.js；这是淘宝的兼容解决方案，最大到5.5寸；用的时候把viewport去掉，flexible.js会动态添加；
主要讲一下用法，网上的讲的太细却使很多网友没懂；flexible.js只有4K，作用是：
1.动态改写标签
2.给元素添加 data-dpr 属性，并且动态改写 data-dpr 的值
3.给元素添加 font-size 属性，并且动态改写 font-size 的值
接下来就可以用了，若你的图示640的就设置1rem=64px 如果是750的就设置1rem=75px；比如320X240的banner，那么就换算成5remX3.75rem(640为例)
下载地址

参考博文：

阅读(22721) | 评论(1) | 转发(2) |

上一篇：ThinkPHP的URL重写时遇到No input file specified的解决方法

下一篇：PHP生成缩略图函数

给主人留下些什么吧！~~

shuangbaby1232016-06-02 15:44:46

OneAPM Browser Insight是一个基于真实用户的 Web 前端性能监控平台，实时查看用户请求的性能瓶颈区间，包括请求排队时间、Web应用程序耗时、网络耗时、网页加载时间和资源加载时间，可以在官网注册体验哦~

回复 | 举报

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6