移动端开发技巧

2024年3月8日 150次阅读 来源: Berle

META相关

1.添加到主屏后的标题（IOS）

<meta name="apple-mobile-web-app-title" content="标题">

2.启用 WebApp 全屏模式（IOS）

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-touch-fullscreen" content="yes" />

3.百度禁止转码。通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />

4.设置状态栏的背景颜色（IOS）设置状态栏的背景颜色，只有在 “apple-mobile-web-app-capable” content=”yes” 时生效

  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    default ：状态栏背景是白色。
    black ：状态栏背景是黑色。
    black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

5.开启短信功能：

 <a href="sms:123456">123456</a>

6.移动端邮箱识别（Android）
与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来管别邮箱的自动识别：

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

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

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>

三大手机系统的字体：

1.ios 系统

    默认中文字体是Heiti SC
    默认英文字体是Helvetica
    默认数字字体是HelveticaNeue
    无微软雅黑字体

2.android 系统

    默认中文字体是Droidsansfallback
    默认英文和数字字体是Droid Sans
    无微软雅黑字体

3.winphone 系统

    默认中文字体是Dengxian(方正等线体)
    默认英文和数字字体是Segoe
    无微软雅黑字体
    各个手机系统有自己的默认字体，且都不支持微软雅黑
    如无特殊需求，手机端无需定义中文字体，使用系统默认
    英文字体和数字字体可使用 Helvetica ，三种系统都支持

移动端字体单位font-size选择px还是rem对于只需要适配手机设备，使用px即可对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备rem配置参考：

        html {font-size:10px}
@media screen and (min-width:480px) 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) and (max-width:959px) {
    html {
        font-size: 25px
    }
}
@media screen and (min-width:960px) and (max-width:1079px) {
    html {
        font-size: 30px
    }
}
@media screen and (min-width:1080px) {
    html {
        font-size: 32px
    }
}

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

    当用户手指放在移动设备在屏幕上滑动会触发的touch事件
    以下支持webkit
    touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
    touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
    touchend——当手指离开屏幕时触发
    touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
    以下支持winphone 8
    MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
    MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动
    MSPointerUp——当手指离开屏幕时触发

移动端click屏幕产生200-300 ms的延迟响应移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。

    解决延迟方案：
    fastclick可以解决在手机上点击事件的300ms延迟
    zepto的touch模块，tap事件也是为了解决在click的延迟问题
    触摸事件的响应顺序
    1、ontouchstart 
    2、ontouchmove 
    3、ontouchend 
    4、onclick
    解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应

ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}

部分android系统中元素被点击时产生的边框怎么去掉android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带效果

a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-user-modify:read-write-plaintext-only; 
}

禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

html {
　　        -webkit-text-size-adjust: 100%;
}

屏幕旋转的事件和样式

事件
window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

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{}
}

手机拍照和上传图片

<input type="file">的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">

消除transition闪屏

.css{
    /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
    -webkit-backface-visibility: hidden;
}

开启硬件加速
解决页面闪白
保证动画流畅

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

框架

1. 移动端基础框架

zepto.js 语法与jquery几乎一样，会jquery基本会zepto~
iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~
underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
fastclick 加快移动端点击响应时间
animate.css CSS3动画效果库
Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案

2. 滑屏框架

适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js
swiper

3.瀑布流框架

masonry
工具推荐
caniuse 各浏览器支持html5属性查询
paletton 调色搭配
    原文作者：Berle
    原文地址: https://segmentfault.com/a/1190000004096304
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞