开发webapp与普工pc页面区别
2016-03-15 16:43
495 查看
开发webapp与普工pc页面有所区别，下面介绍一下开发webapp需要注意哪些内容，做好一下设置，会让你避免不少麻烦
工具/原料
html5
css3
方法/步骤
节省样式的加载，其实不仅是为了节省加载，也是为了达到自适应的效果
目前而言，要改变网站的配色方案或者写不同设备的专用样式表，是通过如下代码：
@media only screen and (min-device-width:640px) { ... }//例如，适应某设备的分辨率
其实，没有必要这样让你的样式表白白超载。可以通过下面这个方法去加载指定分辨率下的样式。
<link rel="stylesheet" href="css.css" media="only screen and (min-device-width:640px)">
这样的好处是，只有当你的使用相应的设备，才能加载到相应的样式表。
现在手机的分辨率都比较高了所以这个方法不知道以后还会不会那么适用，但现在还是通用的。当然你也可以通过判断设备来源加载css，可以用js或php等动态语言都是可以的。
meta标签
web app的精华所在，这也是html5中注入的新鲜血液，让我们不用在为开发手机等设备上的页面而去学习新的语言。只要一个html5就可以实现为所有设备制造页面。
1) <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
//强制让文档的宽度与设备的宽度保持1:1，
//文档初始化缩放比例是1:1，
//不允许用户点击屏幕放大浏览，
//允许用户缩放到的最大比例，
//尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。其他属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;
2) <meta name="apple-mobile-web-app-capable" content="yes" />
//iPhone私有标签，它表示：允许全屏模式浏览
3) <meta name="apple-mobile-web-app-status-bar-style" content="black" />
//iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式
4) <meta name="format-detection" content="telephone=no; email=no" /> //不识别邮件和不把数字识别为电话号码
CSS3 -webkit
移动端表单类有圆角、阴影，点击链接时，有灰色底高亮等
1) 消除被点击元素的外观变化，所谓的点击后高亮： -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
2) 阻止旋转屏幕时自动调整字体大小：-webkit-text-size-adjust:none;
3) 解决字体在移动端比例缩小后出现锯齿的问题：-webkit-font-smoothing: antialiased;
4) 盒子阴影：-webkit-box-shadow: none;
5) 圆角：-webkit-border-radius: 0;
6) appearance 属性使元素看上去像标准的用户界面元素， 也可以取消默认的样式：-webkit-appearance: none;一般情况下这个属性我们只给按钮元素，解决ios中默认样式使得我们自己写的样式不生效的问题。
7)栅格布局：box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局
8) 鼠标可以悬停在内容上（指向该内容）而不激活它（单击它）：-webkit-touch-action: manipulation;
App icon 制作
说明：所谓单机模式，其实就是通过把网站添加到主屏，由主屏进入并访问网站的一种方式。通常，app icon是自动截取网站的一部分截图。这样并不是很美观，但也可以通过代码来解决这个问题。尺寸：在iPhone上的默认大小是57px，在iPad上是72px。icon原始图片建议尺寸为128px或者256，并且不建议自行添加光影效果，因为OS自带了。
<link rel="apple-touch-icon" href="/path/to/custom-icon.png">// 若想去掉系统自带的反光效果，可以增加“-precompsed”属性。
<link rel="apple-touch-icon-precompsed" href="/path/to/custom-icon.png">
5
解决触屏设备点击延时问题
当触发"Click"事件时，移动端浏览器将等待约300毫秒的时间后再做出响应，原因是浏览器要判断用户是否执行双击。
解决方法，导入 fastclick.js 即可减少这个时间差：
<script type='application/javascript' src='/path/to/fastclick.js'></script>
导入文件后执行 FastClick.attach(dom元素);就可以了
jQuery 使用方法：
$(function() {
FastClick.attach(document.body);
});
6
如果觉得自己配置比较麻烦那就复制下面的代码吧
l>
END
注意事项
开发过程中总会遇到不少的小问题，只要善于总结，迟早有一天你会成为web告诉，good luck少年
工具/原料
html5
css3
方法/步骤
节省样式的加载，其实不仅是为了节省加载，也是为了达到自适应的效果
目前而言，要改变网站的配色方案或者写不同设备的专用样式表，是通过如下代码：
@media only screen and (min-device-width:640px) { ... }//例如，适应某设备的分辨率
其实，没有必要这样让你的样式表白白超载。可以通过下面这个方法去加载指定分辨率下的样式。
<link rel="stylesheet" href="css.css" media="only screen and (min-device-width:640px)">
这样的好处是，只有当你的使用相应的设备，才能加载到相应的样式表。
现在手机的分辨率都比较高了所以这个方法不知道以后还会不会那么适用，但现在还是通用的。当然你也可以通过判断设备来源加载css，可以用js或php等动态语言都是可以的。
meta标签
web app的精华所在，这也是html5中注入的新鲜血液，让我们不用在为开发手机等设备上的页面而去学习新的语言。只要一个html5就可以实现为所有设备制造页面。
1) <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
//强制让文档的宽度与设备的宽度保持1:1，
//文档初始化缩放比例是1:1，
//不允许用户点击屏幕放大浏览，
//允许用户缩放到的最大比例，
//尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。其他属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;
2) <meta name="apple-mobile-web-app-capable" content="yes" />
//iPhone私有标签，它表示：允许全屏模式浏览
3) <meta name="apple-mobile-web-app-status-bar-style" content="black" />
//iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式
4) <meta name="format-detection" content="telephone=no; email=no" /> //不识别邮件和不把数字识别为电话号码
CSS3 -webkit
移动端表单类有圆角、阴影，点击链接时，有灰色底高亮等
1) 消除被点击元素的外观变化，所谓的点击后高亮： -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
2) 阻止旋转屏幕时自动调整字体大小：-webkit-text-size-adjust:none;
3) 解决字体在移动端比例缩小后出现锯齿的问题：-webkit-font-smoothing: antialiased;
4) 盒子阴影：-webkit-box-shadow: none;
5) 圆角：-webkit-border-radius: 0;
6) appearance 属性使元素看上去像标准的用户界面元素， 也可以取消默认的样式：-webkit-appearance: none;一般情况下这个属性我们只给按钮元素，解决ios中默认样式使得我们自己写的样式不生效的问题。
7)栅格布局：box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局
8) 鼠标可以悬停在内容上（指向该内容）而不激活它（单击它）：-webkit-touch-action: manipulation;
App icon 制作
说明：所谓单机模式，其实就是通过把网站添加到主屏，由主屏进入并访问网站的一种方式。通常，app icon是自动截取网站的一部分截图。这样并不是很美观，但也可以通过代码来解决这个问题。尺寸：在iPhone上的默认大小是57px，在iPad上是72px。icon原始图片建议尺寸为128px或者256，并且不建议自行添加光影效果，因为OS自带了。
<link rel="apple-touch-icon" href="/path/to/custom-icon.png">// 若想去掉系统自带的反光效果，可以增加“-precompsed”属性。
<link rel="apple-touch-icon-precompsed" href="/path/to/custom-icon.png">
5
解决触屏设备点击延时问题
当触发"Click"事件时，移动端浏览器将等待约300毫秒的时间后再做出响应，原因是浏览器要判断用户是否执行双击。
解决方法，导入 fastclick.js 即可减少这个时间差：
<script type='application/javascript' src='/path/to/fastclick.js'></script>
导入文件后执行 FastClick.attach(dom元素);就可以了
jQuery 使用方法：
$(function() {
FastClick.attach(document.body);
});
6
如果觉得自己配置比较麻烦那就复制下面的代码吧
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <!--允许全屏--> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="yes" name="apple-touch-fullscreen" /> <meta name="data-spm" content="a215s" /> <meta content="telephone=no,email=no" name="format-detection" /> <meta content="fullscreen=yes,preventMove=no" name="ML-Config" /> <link href="icon114-114.png" rel="apple-touch-icon-precomposed"> <link href="icon.png" rel="Shortcut Icon" type="image/x-icon" /> <title>first web app</title> </head> <body> first web app </body> </html>
l>
END
注意事项
开发过程中总会遇到不少的小问题，只要善于总结，迟早有一天你会成为web告诉，good luck少年
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- webapp开发技巧
- WebApp开发技巧精华总结
- webApp如何区分android或者IOS系统
- Eclipse Maven WebApp迁移至MyEcipse
- jquery mobile开发手机webapp页面（二）上传功能
- Eclipse+Maven创建webapp项目<二>
- Eclipse+Maven创建webapp项目<一>
- 项目总结 iFun 个人生活 webapp
- SpringbootUnable to start EmbeddedWebApplicationContext due to missing EmbeddedServletContainerFact
- webapp前端开发软键盘与position:fixed为我们带来的不便
- webApplicationContext 与servletContext
- SPRING IN ACTION 第4版笔记-第九章Securing web applications-001-SpringSecurity简介(DelegatingFilterProxy、AbstractSecurityWebApplicationInitializer、WebSecurityConfigurerAdapter、@EnableWebSecurity、@EnableWebMvcS)
- 解决maven搭建webapp项目，src/main/java无法建立的问题
- WebAPP输入框被软键盘遮挡肿么办？
- SPRING IN ACTION 第4版笔记-第七章Advanced Spring MVC-001- DispatcherServlet的高级配置(ServletRegistration.Dynamic、WebApplicationInitializer)
- 手机webapp meta标签 (全屏)
- webapp移动端适配方案之“手淘框架flexible”
- WebApplicationContext初始化
- 分享WEBAPP利用纯HTML5实现拨打电话，打开相册，打开摄像头源码
- WebAPP输入框被软键盘遮挡肿么办？