您的位置：首页 > 其它

移动web资源整理

2015-11-27 20:50 417 查看

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

贷款买个房子

每周羽毛球、跑步、骑单车

阅读《自控力》、《大数据时代》、《逻辑思维》

学习《javascript征途》、《锋利的jQuery2》、《深入浅出Node.js》

博客每月2篇

回到主题~

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

设备更新换代快——低端机遗留下问题、高端机带来新挑战

浏览器厂商不统一——兼容问题多

网络更复杂——弱网络，页面打开慢

低端机性能差——页面操作卡顿

HTML5新技术多——学习成本不低

未知问题——坑多

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

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

目录（更新于20151117）

meta基础知识

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

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

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

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

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

viewport模板 (new)

常见问题

移动端如何定义字体font-family

移动端字体单位font-size选择px还是rem

移动端touch事件(区分webkit 和 winphone) (new)

移动端click屏幕产生200-300 ms的延迟响应

触摸事件的响应顺序

什么是Retina 显示屏，带来了什么问题

ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

部分android系统中元素被点击时产生的边框怎么去掉

winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

webkit表单元素的默认外观怎么重置

webkit表单输入框placeholder的颜色值能改变么

webkit表单输入框placeholder的文字能换行么

IE10（winphone8）表单元素默认外观如何重置

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

禁止ios和android用户选中文字

打电话发短信写邮件怎么实现

模拟按钮hover效果

屏幕旋转的事件和样式

audio元素和video元素在ios和andriod中无法自动播放

摇一摇功能

手机拍照和上传图片

微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整

消除transition闪屏

开启硬件加速

取消input在ios下，输入的时候英文首字母的默认大写

android上去掉语音输入按钮

android 2.3 bug

android 4.x bug

设计高性能CSS3动画的几个要素

fixed bug

如何阻止windows Phone的默认触摸事件

播放视频不全屏

常用的移动端框架

zepto.js

iscroll.js

underscore.js

滑屏框架

flex布局

FastClick

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航