Chinaunix首页 | 论坛 | 博客

Liguanh

首页　| 　博文目录　| 　关于我

lgh189491

  • 博客访问： 260755
  • 博文数量： 36
  • 博客积分： 25
  • 博客等级： 民兵
  • 技术积分： 993
  • 用 户 组： 普通用户
  • 注册时间： 2012-06-13 08:59
文章分类

全部博文（36）

文章存档

2017年（1）

2016年（4）

2015年（9）

2014年（8）

2013年（14）

我的朋友
最近访客
推荐博文
移动端web头部header通用写法

分类： Html/Css

2016-04-13 09:38:06

原文地址：移动端web头部header通用写法 作者：蓝天上的青鸟

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

点击(此处)折叠或打开

  1. <head lang="en">
  2.     <meta charset="UTF-8">
  3.     
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  5.     
  6.     <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  7.     
  8.     <meta name="apple-mobile-web-app-title" content="">
  9.     
  10.     <meta name="apple-mobile-web-app-capable" content="yes"/>
  11.     
  12.     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  13.     
  14.     <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  15.     
  16.     <meta name="format-detection" content="telphone=no, email=no"/>
  17.     
  18.     <meta http-equiv="Pragma" content="no-cache">
  19.     <meta http-equiv="Cache-Control" content="no-cache">
  20.     <meta http-equiv="Expires" content="0">
  21.     <title>web前端-马乐</title>
  22. </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为例)
下载地址 

参考博文：
阅读(1779) | 评论(0) | 转发(0) |
0

上一篇：vim文本编辑器的使用

下一篇：git的使用

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

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

16024965号-6