移动web开发常见的问题
1.屏幕旋转的事件和样式
事件
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{}
}
2.audio元素和video元素在ios和andriod中无法自动播放
应对方案:触屏即播
$('html').one('touchstart',function(){
audio.play()
})
3.摇一摇功能
HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
4.手机拍照和上传图片
<input type="file">的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
使用总结:
- iOS有拍照、录像、选取本地图片功能
- 部分android只有选取本地图片功能
- winphone不支持
- input控件默认外观丑陋
5.消除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);
}
设计高性能CSS3动画的几个要素
- 尽可能地使用合成属性transform和opacity来设计CSS3动画
- 不使用position的left和top来定位
- 利用translate3D开启GPU加速
6. android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
移动web开发常见的问题的更多相关文章
- Web 开发常见安全问题
不是所有 Web 开发者都有安全的概念,甚至可能某些安全漏洞从来都没听说过.这就是这篇科普文章的存在意义,希望 Web 开发者在开发时能依此逐条检查代码中的安全问题. 注:服务器运维相关的安全注意事项 ...
- web开发常见的鉴权方式
结合网上找的资料整理了一下,以下是web开发中常见的鉴权方法: 预备:一些基本的知识 RBAC(Role-Based Access Control)基于角色的权限访问控制(参考下面①的连接) l ...
- Web开发常见安全问题
转载自: http://blog.csdn.net/fengyinchao/article/details/50775121 不是所有 Web 开发者都有安全的概念,甚至可能某些安全漏洞从来都没听说过 ...
- Web开发常见的几个漏洞解决方法 (转)
基本上,参加的安全测试(渗透测试)的网站,可能或多或少存在下面几个漏洞:SQL注入漏洞.跨站脚本攻击漏洞.登陆后台管理页面.IIS短文件/文件夹漏洞.系统敏感信息泄露. 1.测试的步骤及内容 这些安全 ...
- Web开发常见的几个漏洞解决方法
http://www.cnblogs.com/wuhuacong/archive/2013/04/15/3022011.html 如何利用SQL注入漏洞攻破一个WordPress网站 平时工作,多数是 ...
- web开发常见的几大安全问题
一.SQL注入 SQL注入是一种常见的Web安全漏洞,攻击者利用这个漏洞,可以访问或修改数据,或者利用潜在的数据库漏洞进行攻击.SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求 ...
- web开发常见性能优化方式
经常使用的高并发. 高性能web,数据库server. 1.html 静态化 : 如新闻频道更新的非常快,都是通过cms静态生成(门户,信息公布类型的站点,交互性高的如猫扑的大杂烩也是静态化,实时静 ...
- web开发常见bug汇总
1.在做使用struts2进行文件上传时总是出现 java.lang.NoClassDefFoundError: org/apache/commons/io/output/DeferredFileOu ...
- Web开发常见的漏洞
SQL注入漏洞 跨站脚本攻击漏洞 登陆后台管理页面 IIS短文件/文件夹漏洞 系统敏感信息泄露
- WEB开发常见错误-php无法操作数据库
Ubuntu 安装phpmyadmin 和配置 ubuntu 安装 phpmyadmin 两种 : 1: apt-get 安装 然后使用 已有的虚拟主机目录建立软连接 sudo apt-g ...
随机推荐
- element ui table(表格)点击一行展开
element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...
- STL源码分析之第一级配置器
前言 上一节我们分析了空间配置器对new的配置, 而STL将空间配置器分为了两级, 第一级是直接调用malloc分配空间, 调用free释放空间, 第二级三就是建立一个内存池, 小于128字节的申请都 ...
- 配置Jupyter
前几天见同学有用Jupyter notebook的,有点喜欢,于是今天自己配了一下. Jupyter是一个非常好用编辑器,因为Jupyter notebook 不仅可以编写代码运行,并且可以直接在代码 ...
- C# 通过反射为一个对象赋值
/// <summary> /// 反射赋值 /// </summary> public class ObjectReflection { publ ...
- MySQL日志格式 binlog_format
MySQL 5.5 中对于二进制日志 (binlog) 有 3 种不同的格式可选:Mixed,Statement,Row,默认格式是 Statement.总结一下这三种格式日志的优缺点. MySQL ...
- mysql 与elasticsearch实时同步常用插件及优缺点对比(ES与关系型数据库同步)
前言: 目前mysql与elasticsearch常用的同步机制大多是基于插件实现的,常用的插件包括:elasticsearch-jdbc, elasticsearch-river-MySQL , g ...
- CODEVS——T 1004 四子连棋
http://codevs.cn/problem/1004/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Descr ...
- UVA Jin Ge Jin Qu hao 12563
Jin Ge Jin Qu hao (If you smiled when you see the title, this problem is for you ^_^) For those who ...
- POJ 3710
树的删边游戏.. 由于题目的特殊性,我们只需计算环的边数值.若为偶环,则直接把环的根节点置0.若为奇环,则留下一条边与根结点相连,并那它们的SG置0: 注意的是,两个点也可构成环,因为允许重边.所以, ...
- [React] Update Application State with React Apollo ApolloConsumer Component
In this lesson I refactor some code that utilizes the Mutation component to update client-side cache ...