作为前端想要开发自己的手机应用,可能会首选webapp,前提是手机要有webkit内核浏览器,幸好ios和Android默认的都是webkit内核浏览器。
1.viewport:
由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;
实际上我们可以操作的属性有4 个:
width - // viewport 的宽度 (范围从200 到10,000,默认为980 像素)
height - // viewport 的高度 (范围从223 到10,000)
initial-scale - // 初始的缩放比例 (范围从>0 到10)
minimum-scale - // 允许用户缩放到的最小比例
maximum-scale - // 允许用户缩放到的最大比例
user-scalable - // 用户是否可以手动缩 (no,yes)
那么到底这些设置如何让浏览器知道?其实很简单,就一个meta,形如:
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/> //可设置手机分辨率宽度为某个固定宽度 <meta name=”apple-mobile-web-app-capable” content=”yes” /> // 离线应用的另一个技巧 <meta name=”apple-mobile-web-app-status-bar-style” content=black” /> // 隐藏状态栏 <meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式 <meta content="telephone=no" name="format-detection" /> //忽略将页面中的数字识别为电话号码 <meta content="email=no" name="format-detection" /> //忽略将页面中邮件地址
2.自适应布局,为达到适配各种手持设备,应用css3 弹性盒子布局,放弃float
参考: http://www.w3.org/TR/css3-flexbox/
http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex属性,然后弹性盒子模型简介/
3.返回顶部的实现方法
Android:对锚点支持有限,只能跳转一次
ios : 对锚点支持和pc浏览器一致
解决方案:javascript: scrollTo(0, 1);
4.隐藏浏览器地址栏:
addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); });
5. 使用特殊的链接:
<a href="tel:123456789">打电话 <a href="sms:123456789">发短信
6. 阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
·本站大部分文章和内容来自互联网,如果您觉得我们侵犯了您的权益,请告诉我们!
·您在本站发表的作品,本站有权在网站内转载或引用!
·本站所提供的设计,摄影及其它作品,如需使用,请与原作者联系,版权归原作者所有。