【原】移动web资源整理


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

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

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

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

目录更新于20190213

  • meta基础知识
    • H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
    • 忽略将页面中的数字识别为电话号码
    • 忽略Android平台中对邮箱地址的识别
    • 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari 
    • 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
    • viewport模板 
  • 常见问题
    • 移动端如何定义字体font-family
    • 移动端字体单位font-size选择px还是rem 
    • 移动端touch事件(区分webkit 和 winphone)
    • 移动端click屏幕产生200-300 ms的延迟响应
    • 触摸事件的响应顺序
    • 什么是Retina 显示屏,带来了什么问题
    • ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
    • 部分android系统中元素被点击时产生的边框怎么去掉
    • winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
    • webkit表单元素的默认外观怎么重置 
    • webkit表单输入框placeholder的颜色值能改变么
    • webkit表单输入框placeholder的文字能换行么
    • IE10(winphone8)表单元素默认外观如何重置
    • 禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片
    • 禁止微信浏览器图片长按出现菜单   (new)
    • 禁止微信浏览器长按“显示在浏览器打开”   (new)
    • 禁止ios和android用户选中文字
    • 打电话发短信写邮件怎么实现
    • 模拟按钮hover效果
    • 屏幕旋转的事件和样式
    • audio元素和video元素在ios和andriod中无法自动播放
    • 摇一摇功能
    • 手机拍照和上传图片
    • 微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整
    • 消除transition闪屏
    • 开启硬件加速
    • 取消input在ios下,输入的时候英文首字母的默认大写
    • android上去掉语音输入按钮
    • android 2.3 bug
    • android 4.x bug
    • 设计高性能CSS3动画的几个要素
    • fixed bug
    • 如何阻止windows Phone的默认触摸事件
    • 播放视频不全屏
    • 微信浏览器禁止页面上下拉动   (new)
  • 常用的移动端框架
    • zepto.js
    • iscroll.js
    • underscore.js
    • 滑屏框架
    • flex布局 
    • FastClick
    • Sea.js

meta基础知识

http://peunzhang.github.io/demo/standalone/test1.html

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

常见问题

移动端使用字体的思考》

http://peunzhang.github.io/demo/rem/index.html

https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

以下支持winphone 8

  • MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
  • MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动
  • MSPointerUp——当手指离开屏幕时触发

高清显示屏原理及设计方案》

如何去除android上a标签产生的边框》

如何改变表单元素的外观(for Webkit and IE10)》

移动web页面给用户发送邮件的方法》

<a href="mailto:xxx@foxmail.com">xxx@foxmail.coma>

http://peunzhang.github.io/demo/btn/btn.html

或者:

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">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
style>
head>
<body>

<div class="btn-blue">按钮div>

<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
script>
body>
html>

兼容性ios5+、部分android 4+、winphone 8

要做到全兼容的办法,可通过绑定ontouchstart和ontouchend来控制按钮的类名

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">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
style>
head>
<body>

<div class="btn-blue">按钮div>

<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
    this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
    this.className = "btn-blue"
}
script>
body>
html>

无法自动播放的audio元素》


https://developers.weixin.qq.com/community/develop/doc/000a26b86948f8743cb9a6da951409
/**
 * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小
 * 但是会有一个1秒左右的延迟,期间可以考虑通过loading展示
 * 仅供参考
 */
(function(){
    if (typeof(WeixinJSBridge) == "undefined") {
        document.addEventListener("WeixinJSBridgeReady", function (e) {
            setTimeout(function(){
                WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":2}, function(res) {
                    alert(JSON.stringify(res));
                });
            },0);
        });
    } else {
        setTimeout(function(){
            WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":2}, function(res) {
                alert(JSON.stringify(res));
            });
        },0);
    }
})();
  • ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust: 100%!important;}

最好的解决方案:

  • 整个页面用rem或者百分比布局

用CSS开启硬件加速来提高网站性能》

border-radius 移动之伤》

High Performance Animations》

移动端web页面使用position:fixed问题总结》

《使用iScroll.js解决ios4下不支持position:fixed的问题》

Windows phone 8 touch support》

http://peunzhang.github.io/demo/video/index.html

http://zeptojs.com/

中文(非官网):http://www.css88.com/doc/zeptojs_api/

常使用的扩展模块:

浏览器检测:https://github.com/madrobby/zepto/blob/master/src/detect.js

tap事件:https://github.com/madrobby/zepto/blob/master/src/touch.js

http://cubiq.org/iscroll-5

http://underscorejs.org/

slip.js

iSlider.js

fullpage.js

swiper.js

flexyboxes

“老”的Flexbox和“新”的Flexbox

跨浏览器的Flexbox

FastClick》

CMD 规范,可以像 Node.js 一般书写模块代码。
  • 自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
  • 地址:http://seajs.org/docs/

    禁止页面上下拉动