挪动开辟范例概述

2024年1月13日 129次阅读 来源: 3Sharp

字体设置

运用无衬线字体

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

基本交互

设置全局的CSS款式，防止图中的长按弹出菜单与选中文本的行动

a, img {
    -webkit-touch-callout: none; /* 制止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 制止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

挪动机能

要斟酌Android低端机与2G收集场景下机能 注重！

宣布前必要搜检项

  • 一切图片必须有举行过紧缩

  • 斟酌适度的有损紧缩，如转化为80%质量的jpg图片

  • 斟酌把大图切成多张小图，罕见在banner图过大的场景

加载机能优化, 到达翻开充足快

  • 数据离线化，斟酌将数据缓存在 localStorage

  • 初始要求资本数 < 4 注重！

  • 图片运用CSS Sprites 或 DataURI

  • 外链 CSS 中防止 @import 引入

  • 斟酌内嵌小型的静态资本内容

  • 初始要求资本gzip后总体积 < 50kb

  • 静态资本(HTML/CSS/JS/Image)是不是优化紧缩？

  • 防止打包大型类库

  • 确保接入层已开启Gzip紧缩（斟酌提拔Gzip级别，运用CPU开支调换加载时候） 注重！

  • 只管运用CSS3替代图片

  • 初始首屏以外的静态资本（JS/CSS）耽误加载 注重！

  • 初始首屏以外的图片资本按需加载（推断可视地区） 注重！

  • 单页面运用(SPA)斟酌耽误加载非首屏营业模块

  • 开启Keep-Alive链路复用

运转机能优化, 到达操纵充足流通

  • 防止 iOS 300+ms 点击延时题目 注重！

  • 缓存 DOM 挑选与盘算

  • 防止触发页面重绘的操纵

  • Debounce一连触发的事宜(scroll / resize / touchmove等)，防止高频仍触发实行 注重！

  • 只管运用事宜代办，防止批量绑定事宜

  • 运用CSS3动画替代JS动画

  • 防止在低端机上运用大批CSS3渐变暗影结果，可斟酌降级结果来提拔流通度

  • HTML构造层级坚持充足简朴

  • 尽能少的运用CSS高等挑选器与通配挑选器

  • Keep it simple

在线机能检测评定东西运用指南

  • 接见 Google PageSpeed 在线评定网站

  • 在地点栏输入目的URL地点，点击剖析按钮最先检测

  • 按 PageSpeed 剖析出的发起举行优化，优先处理赤色种别的题目

罕见Hack(不断更新…)

1.修正和去除挪动端点击事宜涌现的背景框

-webkit-tap-highlight-color: rgba(240,240,240,0.7);
//通明色为：rgba(0,0,0,0)

2.选中中文字的背景色

::selection         { background:#FFF; color:#333; }
::-moz-selection    { background:#FFF; color:#333; }
::-webkit-selection { background:#FFF; color:#333;}

3.怎样制止手机浏览器、微信浏览器的高低滑动显露黑色块题目

<script type='text/javascript'>
document.querySelector('body').addEventListener('touchstart', function (ev) {
    event.preventDefault();
});
</script>

4.淘宝无线Web概述地点
5.挪动端viewport

width=750,  target-densitydpi=high-dpi，minimum-scale=1.0, maximum-scale=2.0, user-scalable=0
//牢固宽度，费事
width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui
//百分比

6.动态设置页面html，Font-size的值，方便运用rem

//为页面html动态设置font-size值
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = clientWidth / 7.5 + 'px';
        //等价于clientWidth / 750 * 100 + 'px';
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);//resize
    doc.addEventListener('DOMContentLoaded', recalc, false);//reload
})(document, window);

7.定义浏览器点击行动：

<a href="tel:020-10086">打电话给:020-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:me@22278.club">发送邮件: me@22278.club</a>

<meta name="format-detection" content="telephone=no"/>
content 内里的参数：telephone=no 是制止浏览器自动识别手机号码，email=no 是制止浏览器自动识别Email。

8.自定义苹果图标
在网站文件根目录放一个 apple-touch-icon.png 文件，苹果装备保留网站为书签或桌面快捷方式时，就会运用这个文件作为图标，文件尺寸发起为：180px × 180px。

9.css

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*运用无衬线字体*/
}

a, img {
    -webkit-touch-callout: none; /*制止长按链接与图片弹出菜单*/
}

html, body {
    -webkit-user-select: none; /*制止选中文本*/
    user-select: none;
}

button,input,optgroup,select,textarea {
    -webkit-appearance:none; /*去掉webkit默许的表单款式*/
}

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半通明背景*/
}

input::-webkit-input-placeholder {
    color:#ccc; /*修正webkit中input的planceholder款式*/
}

input:focus::-webkit-input-placeholder {
    color:#f00; /*修正webkit中focus状态下input的planceholder款式*/
}

body {
    -webkit-text-size-adjust: 100%!important; /*制止IOS调解字体大小*/
}

input::-webkit-input-speech-button {
    display: none; /*隐蔽Android的语音输入按钮*/
}

10.media query

@media screen and (max-width: 600px) {
    //你的款式放在这里....
}
@media screen and (min-width: 900px) {
    //你的款式放在这里...
}
@media screen and (min-width: 600px) and (max-width: 900px) {
    //你的款式放在这里...
}

/* iPhone and Smartphones (portrait and landscape) */
@media screen and (min-device-width : 320px) and (max-device-width: 480px) {
    //你的款式放在这里...
}
max-device-width指的是装备全部衬着区宽度（装备的现实宽度）

// Landscape phones and down
@media (max-width: 480px) { ... }
 
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
 
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
 
// Large desktop
@media (min-width: 1200px) { .. }
    原文作者：3Sharp
    原文地址: https://segmentfault.com/a/1190000003861110
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞