开发webapp与普工pc页面的区别

转载 2015年11月21日 18:22:01
开发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
如果觉得自己配置比较麻烦那就复制下面的代码吧
<!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>
END
注意事项
开发过程中总会遇到不少的小问题,只要善于总结,迟早有一天你会成为web告诉,good luck少年
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。

开发webapp与普工pc页面区别

开发webapp与普工pc页面有所区别,下面介绍一下开发webapp需要注意哪些内容,做好一下设置,会让你避免不少麻烦 工具/原料 html5 css3 方法/步骤 节省样式的加载,...
  • HX_lei
  • HX_lei
  • 2016年03月15日 16:43
  • 134

PCweb开发与移动web开发区别在于什么?

这篇文章只是我深入了解移动领域开发过程中的不断整理和总结,其中涉及到很多概念,观点,个人的看法,有不确切的地方,欢迎指正。 首先要明确移动web和webapp是不同的 1:移动we...
  • qq_20913021
  • qq_20913021
  • 2016年05月18日 10:55
  • 2745

[转载]一个由React.js编写的新闻WebApp

ReactNewsApp介绍一个由React.js编写的新闻WebApp。 A news WebApp by React.js. 本应用仅供学习,请不要用于商业用途,供学习交流�� 因为技术有限...
  • whh181
  • whh181
  • 2017年03月30日 09:17
  • 1374

走进大前端:AngularJS 仿拉勾网 WebApp 开发移动端单页应用

CK2104-Angular JS 仿拉勾网 WebApp 开发移动端单页应用 随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学...
  • cadn_jueying
  • cadn_jueying
  • 2017年11月23日 20:09
  • 121

WEB开发中“前端”和“后端”的区别

作为一个从零开始的new bee,一直搞不清前端和后端的区别,今天看到这篇文章,吐槽的很清晰明了,转载了。 “前端”“后端”傻傻分不清楚 - 网页设计师 VS. 网页开发者,一样悲催的两个物种...
  • xiaoquanniao
  • xiaoquanniao
  • 2014年12月15日 10:51
  • 6108

关于静态页面和动态页面的解释

由于小伙伴经常搞不清楚动态页面和静态页面的区别 这里讲一下 一、静态web页面: 1、在静态Web程序中,客户端使用Web浏览器(IE、FireFox等)经过网络(Network)连...
  • yinzhipeng123
  • yinzhipeng123
  • 2016年11月04日 19:24
  • 658

静态页面和动态页面的区别

一、静态web页面: 1、在静态Web程序中,客户端使用Web浏览器(IE、FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务器我现在...
  • qq_26975307
  • qq_26975307
  • 2017年01月03日 10:35
  • 1550

关于在页面中JS代码的位置

javascript写在head和body里的区别 页面加载的时候是从上往下执行的,即先执行再执行。 Javascript写在哪里?概括起来就是三种形式: 1. 内部:Html网...
  • TomKKlalala
  • TomKKlalala
  • 2016年11月30日 19:39
  • 125

使用webView加载html作为app引导页面

用html的理由引导页用原生的Android开发也可以做,为何要用html呢?这么麻烦,岂不是增加开发复杂度? 其实不是的,我觉得使用webview+html原因有二:1、动画效果因为html结合j...
  • yuzhiyun3536
  • yuzhiyun3536
  • 2016年08月28日 21:41
  • 1563

WebAPP与Native APP到底有什么区别

Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发, 该模式...
  • cherrybomb1111
  • cherrybomb1111
  • 2017年03月29日 10:55
  • 477
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:开发webapp与普工pc页面的区别
举报原因:
原因补充:

(最多只允许输入30个字)