开发webapp与普工pc页面有所区别,下面介绍一下开发webapp需要注意哪些内容,做好一下设置,会让你避免不少麻烦

转载 2015年11月21日 18:17:10
开发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少年

相关文章推荐

Cordova webapp实战开发:(2)认识一下Cordova

如何封装一个浏览器成webapp? 在群里,有个朋友问了一个问题“如何封装一个浏览器成webapp?”  每个手机就像电脑一样,都带着自己的操作系统。如果你愿意,你可以从头写一个浏览器,把浏览地址...

java设计模式之外观模式(门面模式)   针对外观模式,在项目开发和实际运用中十分频繁,但是其极易理解,下面就简要介绍一下。 一、概念介绍   外观模式(Facade),他隐藏了系统的复杂性,并

java设计模式之外观模式(门面模式)   针对外观模式,在项目开发和实际运用中十分频繁,但是其极易理解,下面就简要介绍一下。 一、概念介绍   外观模式(Facade),他隐藏了系统的复杂...

jquery mobile开发手机webapp页面

jquery mobile开发webapp(一)

jquery mobile开发手机webapp页面(三)拖动排序插件Sortable

Sortable.js排序插件的应用举例
  • z21102
  • z21102
  • 2016-06-23 15:44
  • 2795

手机网站和webapp开发默认页面

手机网站和webapp开发,有好多meta,每次都找挺麻烦的,于是做这么一个默认页面,用起来方便。 无标题文档 --> --> <!--默认值为default(白色...

jquery mobile开发手机webapp页面(二)上传功能

uploadifive上传插件在项目中的应用
  • z21102
  • z21102
  • 2016-03-08 17:38
  • 1407

webApp开发(二)-新建空白页面

Document

微信H5页面开发、手机微商城、移动webApp开发

基于微信端H5+CSS3移动端web网站开发模版来啦!!!web前端开发的童靴有福利啦, 最新运用HTML5+CSS3(rem)+jQuery+zepto+webAPi 开发手机webApp - ...

前2天后台系统需要生成报表,正好抽时间复习了一下之前做过的JAVA生成EXCEL,下面介绍POI 和JXL 生成报表的2种方式。

前2天后台系统需要生成报表,正好抽时间复习了一下之前做过的JAVA生成EXCEL,下面介绍POI 和JXL 生成报表的2种方式。 1.jxl 生成报表   Java代码   p...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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