宇扬信息科技工作室

webapp开发的一些基本常识

发布: 2013-01-13 08:04:33 | 作者: 不详 | 来源: 本站整理 | 查看: 1058

作为前端想要开发自己的手机应用,可能会首选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;}

评论 0 次    最新评论(评论内容只代表网友观点,与本站立场无关!)
发表评论
点击更换验证码  

·本站大部分文章和内容来自互联网,如果您觉得我们侵犯了您的权益,请告诉我们!

·您在本站发表的作品,本站有权在网站内转载或引用!

·本站所提供的设计,摄影及其它作品,如需使用,请与原作者联系,版权归原作者所有。

About 宇扬联系我们付款方式友情链接网站地图版权声明投稿须知帮助