HTML5技术

移动Web开发 - Storm丶HYL(2)

字号+ 作者：H5之家 来源：H5之家 2017-08-06 10:01 我要评论( )

模拟按钮hover效果 移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下， !DO

模拟按钮hover效果
移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下，

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

<meta content="yes">

<meta content="black">

<meta content="telephone=no">

<meta content="email=no">

<style type="text/css">

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

</style>

</head>

<body>

 

<div>按钮</div>

 

<script type="text/javascript">

document.addEventListener("touchstart", function(){}, true)

</script>

</body>

</html>

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

<meta content="yes">

<meta content="black">

<meta content="telephone=no">

<meta content="email=no">

<style type="text/css">

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-on{background-color: #357AE8;}

</style>

</head>

<body>

 

<div>按钮</div>

 

<script type="text/javascript">

var btnBlue = document.querySelector(".btn-blue");

btnBlue.ontouchstart = function(){

this.className = "btn-blue btn-blue-on"

}

btnBlue.ontouchend = function(){

this.className = "btn-blue"

}

</script>

</body>

</html>

屏幕旋转的事件和样式
事件
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{}

}

audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播

$('html').one('touchstart',function(){

audio.play()

})

可参考《无法自动播放的audio元素》

摇一摇功能
HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

手机拍照和上传图片
<input type=”file”>的accept 属性

<!-- 选择照片 -->

<input type=file accept="image/*">

<!-- 选择视频 -->

<input type=file accept="video/*">

使用总结：

ios 有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能
winphone不支持
input控件默认外观丑陋
微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整
原因

android侧是复写了layoutinflater 对textview做了统一处理
ios侧是修改了body.style.webkitTextSizeAdjust值
解决方案：

android使用以下代码，该接口只在微信浏览器下有效(感谢jationhuang同学提供)

/**

* 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小

* 但是会有一个1秒左右的延迟，期间可以考虑通过loading展示

* 仅供参考

*/

(function(){

if (typeof(WeixinJSBridge) == "undefined") {

document.addEventListener("WeixinJSBridgeReady", function (e) {

setTimeout(function(){

WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {

alert(JSON.stringify(res));

});

},0);

});

} else {

setTimeout(function(){

WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {

alert(JSON.stringify(res));

});

},0);

}

})();

ios使用-webkit-text-size-adjust禁止调整字体大小

body{-webkit-text-size-adjust: 100%!important;}

最好的解决方案：

整个页面用rem或者百分比布局
消除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);

}

参考《用CSS开启硬件加速来提高网站性能》

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

<input autocapitalize="off" autocorrect="off" />

android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

android 2.3 bug

  • translate百分比的写法和scale在一起会导致失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

    • android 4.x bug

    参考《border-radius 移动之伤》

    设计高性能CSS3动画的几个要素

  • 尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
  • 利用translate3D开启GPU加速

    • 参考《High Performance Animations》

    fixed bug

    解决方案

  • 可用isroll.js，暂无完美方案

    • 参考

    《移动端web页面使用position:fixed问题总结》

    《使用iScroll.js解决ios4下不支持position:fixed的问题》

    如何阻止windows Phone的默认触摸事件
    winphone下默认触摸事件事件使用e.preventDefault是无效的

    目前解决方法是使用样式来禁用

    html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */

    参考

    《Windows phone 8 touch support》

    播放视频不全屏

    <!--

    1.ios7+支持自动播放

    2.支持Airplay的设备（如：音箱、Apple TV)播放

    x-webkit-airplay="true"

    3.播放视频不全屏

    webkit-playsinline="true"

    -->

    <video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

    常用的移动端框架

    zepto.js

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

    最新版本已经更新到1.16

    官网：

    中文(非官网)：

    常使用的扩展模块：

    浏览器检测：https://github.com/madrobby/zepto/blob/master/src/detect.js

    tap事件：https://github.com/madrobby/zepto/blob/master/src/touch.js

    iscroll.js

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

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

    最新版本已经更新到5.0

    官网：

    underscore.js

    笔者没用过，不过听说好用，推荐给大家~

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

    最新版本已经更新到1.8.2

    官网：

    滑屏框架

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

    slip.js

    iSlider.js

    fullpage.js

    flex布局
    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;}

    示例：两端对齐

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <meta content="yes">

    <meta content="black">

    <meta content="telephone=no">

    <meta content="email=no">

    <style type="text/css">

    /* ============================================================

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

    </style>

    </head>

    <body>

     

    <div>

    <div>模块一</div>

    <div>模块二</div>

    <div>模块三</div>

    <div>模块四</div>

    </div>

     

    </body>

    </html>

    使用注意：flex下的子元素必须为块级元素，非块级元素在android2.3机器下flex失效

    参考：

    flexyboxes

    “老”的Flexbox和“新”的Flexbox

    跨浏览器的Flexbox

    FastClick

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

    参考《FastClick》

     

    此文来自网上摘录（忘记在哪了）

    　

    移动开发Storm

    1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 基于.net的微服务架构下的开发测试环境运维实践 - 凌晨三点半

      基于.net的微服务架构下的开发测试环境运维实践 - 凌晨三点半

      2017-08-02 14:01

    • 会开发和懂开发的区别 - SAP梦心

      会开发和懂开发的区别 - SAP梦心

      2017-07-29 16:00

    • 基于cordova开发的基本事项和常用总结 - 你猜猜看

      基于cordova开发的基本事项和常用总结 - 你猜猜看

      2017-07-28 10:01

    • vue-devtools vue开发调试神器 - PC.aaron

      vue-devtools vue开发调试神器 - PC.aaron

      2017-07-14 09:01

    网友点评
    精彩导读
    解决百度富文本编辑器 UEditor 插入视频后没有路径的问题 - 我们都是程序猿

    解决百度富文本编辑器 UEditor 插入视频后没

    Entity Framework Core 执行SQL语句和存储过程 - Sweet-Tang

    Entity Framework Core 执行SQL语句和存储过

    文件下载之断点续传（客户端与服务端的实现） - 农码一生

    文件下载之断点续传（客户端与服务端的实现）

    H5——简易马祖 - 左转右转

    H5——简易马祖 - 左转右转

    教你做炫酷的碎片式图片切换 (canvas) - Daryl

    教你做炫酷的碎片式图片切换 (canvas) - Dary

    热门资讯
    Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案： 黔ICP备15004751-2
    HTML5入门 HTML5技术 canvas教程 专题学习