首页 > 移动平台 > 详细

移动web资源整理

时间:2015-11-27 21:50:44      阅读:394      评论:0      收藏:0      [点我收藏+]

回顾2014年,刚转来到新的部门,非常渴望做出一个所谓的成功产品,心态几乎变了,每天都忙忙碌碌在项目中,把原来阅读和学习的习惯给忽视了,作为一个技术人员,没有通过学习新的知识来充实自己,跟进时代的步伐,是比较致命的;另外一点是运动也缺少了,感觉身体不如从前,例如工作太累,晚上容易失眠,让自己感到惶恐,想想就不开心。于是简单给自己定个2015上半年的计划:

  • 贷款买个房子
  • 每周羽毛球、跑步、骑单车
  • 阅读《自控力》、《大数据时代》、《逻辑思维》
  • 学习《javascript征途》、《锋利的jQuery2》、《深入浅出Node.js》
  • 博客每月2篇

回到主题~

2013年底接触移动端,简单做下总结,首先了解下移动web带来的问题

  • 设备更新换代快——低端机遗留下问题、高端机带来新挑战
  • 浏览器厂商不统一——兼容问题多
  • 网络更复杂——弱网络,页面打开慢
  • 低端机性能差——页面操作卡顿
  • HTML5新技术多——学习成本不低
  • 未知问题——坑多

面对这些问题,一开始我们只能在未知中试错,知道错误的方案才能更容易寻找正确的解决问题思路,2年多来,可看到移动web在业界不断趋向于成熟,各种框架和解决方案不断的涌现让移动端开发不再是个噩梦。

这几天把想到的一点经验先罗列出来,后续会持续更新,这篇文章可以给刚接触webapp开发的同学带来帮助,任何疑问欢迎留言探讨~

目录(更新于20151117)

meta基础知识

H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后,safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

viewport模板

viewport模板——通用

技术分享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
这里开始内容
</body>

</html>
技术分享

viewport模板 - target-densitydpi=device-dpi,android 2.3.5以下版本不支持

技术分享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
这里开始内容
</body>

</html>
技术分享

参考案例:http://action.weixin.qq.com/payact/readtemplate?t=mobile/2015/wxzfsht/index_tmpl

移动web资源整理

原文:http://www.cnblogs.com/chris-oil/p/5001696.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!