TracerLee commented 7 years ago

记录移动端开发的一些经验😜。

TracerLee commented 7 years ago

空白页面模板

常见方案

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection"content="telephone=no, email=no" />
    <title>Document</title>
</head>
<body>

</body>
</html>

如果使用了淘宝的Flexible方案

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection"content="telephone=no, email=no" />
        <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
        <title>再来一波</title>
    </head>
    <body>
        <!-- 页面结构写在这里 -->
    </body>
</html>

参考：移动端重构系列2——新建空白页面

TracerLee commented 7 years ago

meta解释

<!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 忽略将页面中的数字识别为电话号码，忽略识别Emal -->
<meta name="format-detection" content="telephone=no,email=no">

<!-- 隐藏状态栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

TracerLee commented 7 years ago

阅读资料

淘宝rem布局方案：使用Flexible实现手淘H5页面的终端适配 github
手淘article：https://github.com/amfe/article/issues
Font Boosting

做过的一些业务

TracerLee commented 7 years ago

一个CSS值转REM的Sublime Text插件

https://github.com/flashlizi/cssrem

TracerLee commented 7 years ago

icon base64代码简易导出方案

举个例子：

liked{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASJJREFUeNpi/P//P8NgAkwMgwyMOogQYKFEc/9ZcxMglQTEfEBcBMSvSDWj0PgkdUII6BhTIDUNiM2AWAOIJwAx20BGWSKafjUgjhtIB6lgEQsYSAfxYhEToTRdUuKgFzgyicJAOegqDnHDgXLQWRzi+UCsOBAO2g/Ev7CIcwBxCt0dBCzQPgCplzikLahWUgMLvLlASp/C3MsPxKAiuBGItwHxGTxqTQiFEKWOgQFmINajRpT9G2y1fQQQvxs0DgIm1ntA6s6gcRAwUddDa/BBE2W+oy1GAg66MtgcBGp4XRhMDuIGYsHB1MjfAMQCgymEBAZbGno2GKuOvYOp6vgGpI4OtoJxMxDPAuJPFJgNak2eI1UT4+hwzKiDhpuDAAIMAIapMxQx+M1OAAAAAElFTkSuQmCC);}

得到以上代码只需将图片拖到chrome浏览器中查看源码

TracerLee commented 7 years ago

fix高版本系统audio安全机制

在高版本的safari浏览器里面，audio播放需要触发一次触屏事件（click，tap等），才能够执行play方法，应该是为了防止打开页面就自动播放音频的问题，但是却造成了一些影响，如果事件回调里面有ajax且play是在ajax里面回调触发的，那音频就无法播放了

针对此安全机制做出以下audio js播放调整

手动初始化音频

// url为可用的播放地址
// $('#Audio')[0]拿到audio节点
$('#Audio')[0].src = url;

在事件（click、tap等需要手指触发的）回调里面执行audio的play方法

$(selector).tap(function(){
    // 如果不在客户端
    if(!isInClient) $('#Audio')[0].play();
    ...
});

TracerLee commented 7 years ago

/**
 * ========================================================
 * common stylesheet
 * 说明：制作时使用720px的设计稿为基准，做计算
 * ========================================================
 */
@media screen and (min-width: 1440px) { html {font-size: 150px !important;} }
@media screen and (max-width: 1440px) { html {font-size: 150px !important;} }
@media screen and (max-width: 1080px) { html {font-size: 150px !important;} }
@media screen and (max-width: 1024px) { html {font-size: 142px !important;} }
@media screen and (max-width: 980px) { html {font-size: 136px !important;} }
@media screen and (max-width: 750px) { html {font-size: 104px !important;}}
@media screen and (max-width: 720px) { html {font-size: 100px !important;} }
@media screen and (max-width: 640px) { html {font-size: 88.88px !important;} }
@media screen and (max-width: 540px) { html {font-size: 75px !important;} }
@media screen and (max-width: 480px) { html {font-size: 66.66px !important;} }
@media screen and (max-width: 432px) { html {font-size: 60px !important;} }
@media screen and (max-width: 414px) { html {font-size: 57.5px !important;} }
@media screen and (max-width: 400px) { html {font-size: 55.55px !important;} }
@media screen and (max-width: 393px) { html {font-size: 54.5px !important;} }
@media screen and (max-width: 375px) {html {font-size: 52.08px !important;}}
@media screen and (max-width: 360px) { html {font-size: 50px !important;} }
@media screen and (max-width: 320px) { html {font-size: 44.44px !important;} }
@media screen and (max-width: 240px) { html {font-size: 33.33px !important;} }

TracerLee commented 6 years ago

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

特性

查看 console 日志
查看网络请求
手动执行 JS 命令行
自定义插件

上手

下载 vConsole 的最新版本。（不要直接下载 dev 分支下的 dist/vconsole.min.js）

或者使用 npm 安装：

npm install vconsole

引入 dist/vconsole.min.js 到项目中：

<script src="path/to/vconsole.min.js"></script>
<script>
console.log('Hello world');
// 然后点击右下角 vConsole 按钮即可查看到 log
</script>

详细使用方法请参阅使用教程。

TracerLee commented 6 years ago

base.css

/* 
 * ========================================================================
 * reset css
 * ========================================================================
 */
 body, html, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, pre, blockquote,
 form, fieldset, legend, input, textarea, th, td, hr, iframe {
     padding: 0;
     margin: 0;
 }
 html {
     -webkit-overflow-scrolling: touch;
     -webkit-text-size-adjust: 100%;
 }
 body {
     -webkit-overflow-scrolling: touch;
     -webkit-box-sizing:border-box;
             box-sizing:border-box;
 }
 body,
 input,
 select,
 textarea,
 input:focus,
 select:focus,
 textarea:focus,
 a {
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none;
     -webkit-appearance: none;
 }
 li {
     list-style-type: none;
 }
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 fieldset {
     border: none;
 }
 legend {
     display: none;
 }
 button, a:active, a:hover {
     outline: 0;
 }
 input[type="checkbox"], input[type="radio"] {
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
 }
 em, i, b {
     font-style: normal;
     font-weight: normal;
 }
 a {
     text-decoration: none;
     -webkit-tap-highlight-color: rgba(0,0,0,0);
 }

 /**
  * =======================================================================
  * common stylesheet
  * 说明：制作时使用750px的设计稿为基准，做计算
  * =======================================================================
  */
 @media screen and (min-width: 1440px) { html {font-size: 144px !important;} }
 @media screen and (max-width: 1440px) { html {font-size: 144px !important;} }
 @media screen and (max-width: 1080px) { html {font-size: 144px !important;} }
 @media screen and (max-width: 1024px) { html {font-size: 136.53px !important;} }
 @media screen and (max-width: 980px) { html {font-size: 130.67px !important;} }
 @media screen and (max-width: 750px) { html {font-size: 100px !important;}}
 @media screen and (max-width: 720px) { html {font-size: 96px !important;} }
 @media screen and (max-width: 640px) { html {font-size: 85.33px !important;} }
 @media screen and (max-width: 540px) { html {font-size: 72px !important;} }
 @media screen and (max-width: 480px) { html {font-size: 32px !important;} }
 @media screen and (max-width: 432px) { html {font-size: 57.6px !important;} }
 @media screen and (max-width: 414px) { html {font-size: 55.2px !important;} }
 @media screen and (max-width: 400px) { html {font-size: 53.33px !important;} }
 @media screen and (max-width: 393px) { html {font-size: 52.27px !important;} }
 @media screen and (max-width: 375px) {html {font-size: 50.13px !important;}}
 @media screen and (max-width: 360px) { html {font-size: 48px !important;} }
 @media screen and (max-width: 320px) { html {font-size: 42.67px !important;} }
 @media screen and (max-width: 240px) { html {font-size: 32px !important;} }

TracerLee commented 4 years ago

iPhone X+ 小黑条（Home Indicator）适配，使用媒体查询

适配小黑条（Home Indicator），不要被遮盖。

主要留出一定空间在底部，以简单添加占位符为方案，代码 less 为例：

// iphone x/xs/11 pro
@device-x: e("screen and (device-width: 375px) and (min-device-height: 724px) and (-webkit-device-pixel-ratio: 3)");
// iphone xr/11
@device-xr: e("screen and (device-width: 414px) and (min-device-height: 808px) and (-webkit-device-pixel-ratio: 2)");
// iphone x/xs/11pro max
@device-xmax: e("screen and (device-width: 414px) and (device-height: 808px) and (-webkit-device-pixel-ratio: 3)");

.footer-blank() {
  height: 68px; width: 100%; background-color: #000;
}
.footer-blank { 
  @media only @device-x { .footer-blank(); }
  @media only @device-xr { .footer-blank(); }
  @media only @device-xmax { .footer-blank(); }
}

参考：https://juejin.im/post/5dad1bd3518825119c47c46a

TracerLee / tracerlee.github.io

移动端开发记录 #20

空白页面模板

meta解释

阅读资料

做过的一些业务

最新`lib.flexible`

一个CSS值转REM的Sublime Text插件

icon base64代码简易导出方案

fix高版本系统audio安全机制

针对此安全机制做出以下audio js播放调整

vConsole

特性

上手

base.css

iPhone X+ 小黑条（Home Indicator）适配，使用媒体查询

TracerLee / tracerlee.github.io

移动端开发记录 #20

空白页面模板

meta解释

阅读资料

做过的一些业务

最新lib.flexible

一个CSS值转REM的Sublime Text插件

icon base64代码简易导出方案

fix高版本系统audio安全机制

针对此安全机制做出以下audio js播放调整

vConsole

特性

上手

base.css

iPhone X+ 小黑条（Home Indicator）适配，使用媒体查询

最新`lib.flexible`