移动端问题小结[2015-11]
2015-12-02 12:55
441 查看
1: 获取滚动条的值:
window.scrollY window.scrollX
桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获取滚动条的值呢?就是上面两个属性,但是事实证明android也支持这属性,所以索性都用woindow.scroll.
2:禁止选择文本:
-webkit-user-select:none
禁止用户选择文本,ios和android都支持
3:屏蔽输入框阴影:
-webkit-appearance:none
可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式
4:Retina屏幕高清图片:
selector { background-image: url(no-image-set.png); background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center; }
image-set的语法,类似于不同的文本,图像也会显示成不同的:
不支持image-set:在不支持image-set的浏览器下,他会支持background-image图像,也就是说不支持image-set的浏览器下,他们解析background-image中的背景图像;
支持image-set:如果你的浏览器支持image-sete,而且是普通显屏下,此时浏览器会选择image-set中的@1x背景图像;
Retina屏幕下的image-set:如果你的浏览器支持image-set,而且是在Retina屏幕下,此时浏览器会选择image-set中的@2x背景图像。
5:html5重力感应事件:
if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); } var speed = 30;//speed var x = y = z = lastX = lastY = lastZ = 0; function deviceMotionHandler(eventData) { var acceleration =event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) { //简单的摇一摇触发代码 alert(1); } lastX = x; lastY = y; lastZ = z; }
关于deviceMotionEvent是HTML5新增的事件,用来检测手机重力感应效果具体可参考http://w3c.github.io/deviceorientation/spec-source-orientation.html
6:手机拍照和上传图片
<input type=”file”>的accept 属性<!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">
相关文章推荐
- 安卓简记-禁止屏幕旋转&屏幕旋转不刷新
- android JetPlayer
- Android Studio 使用之一安装设置
- android 显示flash视频播放器
- iOS_tableview 修改分割线位置(兼容IOS8)
- 提示Android APP性能
- Android注释规范
- iOS开发之事件的产生和传递
- android Audio Capture
- Android使用贝塞尔线高仿QQ聊天消息气泡的拖拽效果
- android Supported Media Formats
- Android异步加载(三)
- android 并发编程 线程间通信3种
- android ExoPlayer(可扩展的播放器)-GitHub开源项目(解决方案)
- 使ionic应用更加贴近原生
- IOS回调
- iOS 9 中的变化汇总
- 如何挑选微信第三方开发商
- ssh中整合spring和hibernate之后的application.xml文件的超详细配置
- Android-回调机制