移动端开发

时间 2019-11-29

标签移动开发栏目无线繁體版

原文原文链接

移动端开发

经常使用代码

基本框架

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,minimum-scale = 1.0,maximum-scale=1.0, user-scalable=no">
  <meta name="description" content="描述" />
  <meta name="keywords" content="关键字" />
  <meta content="yes" name="apple-mobile-web-app-capable">  <!--当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari-->
  <meta content="black" name="apple-mobile-web-app-status-bar-style">  <!--将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式-->
  <meta content="telephone=no" name="format-detection">   <!-- 忽略将页面中的数字识别为电话号码 -->
  <meta content="email=no" name="format-detection"> <!--忽略Android平台中对邮箱地址的识别-->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
</html>
复制代码

兼容代码

语义标签兼容IE

<!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
复制代码

响应式布局

rem布局

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
复制代码

rem配置参考

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
复制代码

flex布局

/* ============================================================
flex：定义布局为盒模型
flex-v：盒模型垂直布局
flex-1：子元素占据剩余的空间
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素两端对齐
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
//实例 两端对齐
<div class="flex flex-pack-justify">
<div>模块一</div>
<div>模块二</div>
<div>模块三</div>
<div>模块四</div>
</div>
复制代码

参考： flexyboxesjavascript

“老”的Flexbox和“新”的Flexboxcss

跨浏览器的Flexboxhtml

功能代码

打电话

<a href="tel:0755-10086">打电话给:0755-10086</a>
复制代码

发短信，winphone系统无效

<a href="sms:10086">发短信给: 10086</a>
复制代码

写邮件，可参考《移动web页面给用户发送邮件的方法》

<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>
复制代码

模拟按钮hover效果

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

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;}
复制代码

要作到全兼容的办法，可经过绑定ontouchstart和ontouchend来控制按钮的类名java

var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
  this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
  this.className = "btn-blue"
}
复制代码

屏幕旋转的事件和样式

window.onorientationchange = function(){
   switch(window.orientation){
     case -90:
     case 90:
     alert("横屏:" + window.orientation);
     case 0:
     case 180:
     alert("竖屏:" + window.orientation);
     break;
   }
}
//样式
//竖屏时使用的样式
 @media all and (orientation:portrait) {
   .css{}
 }

 //横屏时使用的样式
 @media all and (orientation:landscape) {
   .css{}
 }
复制代码

触屏播放

$('html').one('touchstart',function(){
  audio.play()
})
复制代码

手机拍照和上传图片

<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
复制代码

启动硬件加速

.css {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
复制代码

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

<input autocapitalize="off" autocorrect="off" />
复制代码

android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}
复制代码

问题解决方案

astclick能够解决在手机上点击事件的300ms延迟 zepto的touch模块，tap事件也是为了解决在click的延迟问题jquery

经常使用的移动端框架

zepto.js

语法与jquery几乎同样，会jquery基本会zepto~android

最新版本已经更新到1.16ios

官网：zeptojs.com/css3

中文(非官网)：www.css88.com/doc/zeptojs…git

常使用的扩展模块：

浏览器检测：github.com/madrobby/ze…

tap事件：github.com/madrobby/ze…

iscroll.js

解决页面不支持弹性滚动，不支持fixed引发的问题~

实现下拉刷新，滑屏，缩放等功能~

最新版本已经更新到5.0

官网：cubiq.org/iscroll-5

underscore.js

笔者没用过，不过据说好用，推荐给你们~

该库提供了一整套函数式编程的实用功能，可是没有扩展任何JavaScript内置对象。

最新版本已经更新到1.8.2

官网：underscorejs.org/

滑屏框架

适合上下滑屏、左右滑屏等滑屏切换页面的效果

slip.js

iSlider.js

fullpage.js

FastClick

消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟

参考《FastClick》

转载：peunzhang.cnblogs.com/

移动端开发

移动端开发

经常使用代码

基本框架

兼容代码

语义标签兼容IE

响应式布局

rem布局

rem配置参考

flex布局

功能代码

打电话

发短信，winphone系统无效

写邮件，可参考《移动web页面给用户发送邮件的方法》

模拟按钮hover效果

屏幕旋转的事件和样式

触屏播放

手机拍照和上传图片

启动硬件加速

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

android 上去掉语音输入按钮

问题解决方案

经常使用的移动端框架

zepto.js

iscroll.js

underscore.js

滑屏框架

FastClick

参考1

end