移动端web头部header通用写法-php手册-PHP中文网

移动端web头部header通用写法

php中文网

发布： 2016-06-13 08:42:12

原创

1193人浏览过

本文档主要讲述的是Sencha touch 开发指南；主要介绍如何使用Sencha Touch为手持设备进行应用开发，主要是针对iPhone这样的高端手机，我们会通过一个详细的例子来介绍整个开发的流程。 Sencha Touch是专门为移动设备开发应用的Javascrt框架。通过Sencha Touch你可以创建非常像native app的web app，用户界面组件和数据管理全部基于HTML5和CSS3的web标准，全面兼容Android和Apple iOS。希望本文档会给有需要的朋友带来帮助；感兴趣的

查看详情

移动端web头部header通用写法

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

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li><head lang="en"><br /></li><li><meta charset="utf-8"><br /></li><li><br /></li><li><meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"/><br /></li><li><br /></li><li><meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><br /></li><li><br /></li><li><meta name="apple-mobile-web-app-title" content=""><br /></li><li><br /></li><li><meta name="apple-mobile-web-app-capable" content="yes"/><br /></li><li><br /></li><li><meta name="apple-mobile-web-app-status-bar-style" content="black"/><br /></li><li><br /></li><li><meta name="apple-itunes-app" content="app-id=myappstoreid, affiliate-data=myaffiliatedata, app-argument=myurl"><br /></li><li><br /></li><li><meta name="format-detection" content="telphone=no, email=no"/><br /></li><li><br /></li><li><meta http-equiv="pragma" content="no-cache"><br /></li><li><meta http-equiv="cache-control" content="no-cache"><br /></li><li><meta http-equiv="expires" content="0"><br /></li><li><title>web前端-马乐</title><br /></li><li></head></li></ol>

登录后复制

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为例)
下载地址http://www.w3cfuns.com/misc.php?mod=attach&genre=file&aid=1cec8fecbbaf2bf347f2a749486a6525

参考博文：http://www.w3cfuns.com/notes/20813/fecbb840a2574cf712a8625f88a7ab3a.html