移动web开发都会遇到的坑(会持续更新)
1、自适应第一招
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
如果你发现自己做的网页不能适配,看看是不是遗漏的这行代码,initial-scale控制页面的初始化缩放比,user-scalable控制网页是否允许缩放。
2、IOS允许全屏浏览
<meta content=”yes” name=”apple-mobile-web-app-capable” />
3、忽略数字是电话号码
<meta content=”telephone=no” name=”format-detection” />
4、去除Android对邮箱地址的识别
<meta content=”email=no” name=”format-detection” />
5、去除URL控件条
setTimeout(scrollTo,0,0,0);
6、禁止旋转设备
No way,IOS和Android在浏览器里面没法禁止浏览器旋转。
7、关闭IOS键盘自动大写
我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为 input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
8、iOS中如何彻底禁止用户在新窗口打开页面
-webkit-touch-callout:none;
9、IOS禁止用户复制或者保存图片
-webkit-touch-callout:none;
10、IOS禁止选中文字
-webkit-user-select:none
11、IOS获取滚动条高度
桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两 个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获 取滚动条的值呢?
通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。
12、解决边框溢出
width:100%;
-webkit-box-sizing:border-box;
13、输入框获取焦点后默认弹出数字键盘
<input type="tel" placeholder=""/>
记得使用type="tel",而不是type="number"
14、input type="number"去除上下箭头
chrome下:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
firefox下:
input[type="number"]{-moz-appearance:textfield;}
15、input type="password"自动弹出数字键盘
<input type="password" pattern="[0-9]*" maxlength="6" inputmode="numeric" name="password">
15、a标签出现蓝色边框
*{ -webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
}
15、手机调用摄像头或照片
<input type="file" accept="image/*" capture="camera">
16、手机键盘删除键不会触发keyup的问题
可以使用oninput事件
17、文本框placeholder颜色
textarea::-webkit-input-placeholder,input::-webkit-input-placeholder{
font-size: inherit;
color: #ccc;
}
18、数字文本框显示密码样式
<input type="tel" pattern="[0-9]*" inputmode="numeric">
input[type=tel] {
-webkit-text-security: disc;
}
移动web开发都会遇到的坑(会持续更新)的更多相关文章
- web开发工具flask中文英文书籍-持续更新
web开发工具flask中文英文书籍-持续更新 python测试开发_AI命理关注 0.9222018.11.10 07:48:43字数 625阅读 885 python测试开发项目实战-目录 pyt ...
- Android开发中常用的库总结(持续更新)
这篇文章用来收集Android开发中常用的库,都是实际使用过的.持续更新... 1.消息提示的小红点 微信,微博消息提示的小红点. 开源库地址:https://github.com/stefanjau ...
- Android开发走过的坑(持续更新)
1 华为 nova真机 打印不出Log 参考资料:http://www.apkbus.com/thread-585228-1-1.html 解决:针对权限问题,我们当然也可以解决的,华为手机在你的拨号 ...
- H5填坑笔记--持续更新
最近一直在做移动端的页面,发现很多的坑,这里做一下总结,填填坑…… css常见的问题(一) 一.iOS键盘首字母自动大写 IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的. 在i ...
- vue2.0填坑有感(持续更新ing)
1.请求数据 用本地json数据进行mock的时候,一般放在created 过程就Ok了,这样可以尽早获取数据:如果有依赖dom必须存在的清空,就放到mounted里面,具体用法如下所示: // cr ...
- mpvue的坑,持续更新-.-
mpvue... 坑 怎么说呢,去github看一下,发现还是有很多问题没有解决... 不支持filter 亲,到现在还没有支持filter哦.只能用替代方法了,用computed或者渲染前先处理数据 ...
- iOS横竖屏切换的一些坑(持续更新)
最近在做视频类的App,遇到视频滚动播放的坑,紧接着就是横竖屏问题.之前太过天真不想做横竖屏配置.只是想旋转视频View,但是分享什么的包括AlertView还是竖屏样式,项目着急上线(1周提交一次也 ...
- [C#]asp.net开发微信公众平台----目录汇总-持续更新
1.[c#]asp.net微信公众平台开发(1)数据库设计 2.[c#]asp.net微信公众平台开发(2)多层架构框架搭建和入口实现 3.[c#]asp.net微信公众平台开发(3)微信消息封装及反 ...
- python2.7源码或第三方包里埋藏的坑(持续更新)
1.psutil包,aix环境下,如果进程命令过长的话,程序无法取得完整的进程命令,测试代码如下 import psutil proc=psutil.Process(11534558) pidDict ...
随机推荐
- nginx高性能WEB服务器系列之六--nginx负载均衡配置+健康检查
nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...
- java架构师之路,享学课堂VIP课程视频下载
享学课堂并发编程:百度网盘 链接:https://pan.baidu.com/s/10O8oXC0yNRArUh3WKkXayg 提取码:o01s 更多视频获取方式请留言
- ${__BeanShell(${SCRIPT})}
通过将变量名称括在' $ { '和' } '中来引用测试元素中的变量. 函数以相同的方式引用,但按照惯例,函数名称以“ __ ” 开头,以避免与用户值名称冲突*.有些函数使用参数来配置它们,这些函数用 ...
- ptyhon技能树及其学习资源
GUI编程 tkinter Github项目 Tkinter by example effbot 文档 tkinter的一个designer,可以像在qtdesign那样创建UI文件 pyqt5 py ...
- hive Tutorial
hive数据单元按照粒度从大到小,依次为 1.数据库database:可以用show databases; 命令查看所有的数据库,并用use d1; 命令来选中d1数据库,接下来就可以操作d1数据库中 ...
- ORA-24247:网络访问被访问控制列表(ACL)拒绝
今天将一个发送数据库监控邮件的procedure 从10g 迁移到11g,不工作了.处理记录如下: 在Oracle11g中,Oracle在安全方面有了很多的改进,而在网络权限控制方面,也有一个新的概念 ...
- 每一次要fix的pr
1.TODO一定要加自己名字 2.写代码考虑别人的阅读,比如event这样很general的名字不要用,所以不用from sqlalchemy import event, 要用import sqlal ...
- springboot 上传图片与回显
在网上找了很多例子,不能完全契合自己的需求,自行整理了下.需求是这样的:项目小,所以不需要单独的图片服务器,图片保存在服务器中任意的地方,并且可以通过访问服务器来获取图片.话不多说上代码: 1.依赖 ...
- jQuery validate 设置失去焦点就校验
<script type="text/javascript"> $(function(){ var flag = $("#addForm").val ...
- 关于window.console&&console.log(123)的思考
一.JS的且运算记得最开始看到window.console&&console.log(123),当时知道能起什么作用但是没有深入研究,最近在研究后总算弄明白了.要理解这个,首先得明白三 ...