移动端 H5 页面注意事项 (2)

在线的 Tinypng 可以无限次使用，如果想要使用其 API 来进行压缩自动化的话，可以使用 gulp-tinypng 等插件，但是有每月压缩图片数量限制，每月前500张图片免费，其他收费情况参考官网说明。使用其 API 还需要获取 API Key，这里可以获取。
个人觉得想要免费的话使用 API 会有数量限制，时刻惦记着数量有点心累，不如直接使用在线工具，也不麻烦~

8. Loading

首屏 Loading，代码段分享，拿走即用~

function loading(){ function Load(){} Load.prototype.loadImgs = function(urls,callback) { this.urls = urls; this.imgNumbers = urls.length; this.loadImgNumbers = 0; var that =http://www.likecs.com/this; for(var i=http://www.likecs.com/0;i<urls.length;i++){ var obj = new Image(); obj.src = urls[i]; obj.onload = function(){ that.loadImgNumbers++; callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100)); } } }; var loader = new Load(); loader.loadImgs([ // 将所有需要加载的图片地址写于此处 "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png" ],function(percent){ // 假设显示百分比的元素为 $(".percent") $(".percent").text(percent+\'%\'); // 加载结束后，隐藏相应的 loading 或遮罩 if(percent==http://www.likecs.com/100) { $(".mask").css(\'display\',\'none\'); } }); } // 执行 loading 方法 loading(); 9. CSS 动画属性前缀 webkit

使用 CSS3 来制作动画效果的话，webkit 前缀一定记得加，要不然在某些手机下动画效果是没有的。
如下：

-webkit-animation: f .8s 2s forwards ease-in-out; animation: f .8s 2s forwards ease-in-out; @-webkit-keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } }

推荐使用自动化工具来处理未加前缀的 CSS 文件，如 gulp-autoprefixer。

10. Swiper.js & Animate.css

你只需要 Swiper.js 和 Animate.css 即可打造（简单的）移动端 H5 活动页面~
Swiper 是纯 javascript 打造的滑动特效插件，面向手机、平板电脑等移动终端。
Animate.css 是纯 CSS 编写而成的动画库，包含多种常见的 CSS 动画。
引用 Swiper.js，同时在 Animate.css 中寻找需要的动画效果复制粘贴进 css 文件即可，完全不必引用 Animate.css。

11. 使用 Meta 标签进行页面缩放 <!-- 以下代码默认设计稿尺寸为 640 x 1134 --> <meta id=http://www.likecs.com/"viewport" content=http://www.likecs.com/"width=device-width, user-scalable=yes,initial-scale=1" name=http://www.likecs.com/"viewport" /> <script> var detectBrowser = function(name) { if(navigator.userAgent.toLowerCase().indexOf(name) > -1) { return true; } else { return false; } }; var width = parseInt(window.screen.width); var scale = width/640; // 根据设计稿尺寸进行相应修改：640=>? var userScalable = \'no\'; if(detectBrowser("qq/")) userScalable = \'yes\'; document.getElementById(\'viewport\').setAttribute( \'content\', \'target-densitydpi=device-dpi,width=640,user-scalable=\'+userScalable+\',initial-scale=\' + scale); // 这里也别忘了改：640=>? </script>