移动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;}
时间: 2024-10-09 11:07:00

移动web开发都会遇到的坑(会持续更新)的相关文章

Angular js开发的各种坑(持续更新中。。。)

Angular UI的Modal 在按照官方文档写的时候会报如下错误 var ModalDemoCtrl = function ($scope, $modal, $log) {   $scope.items = ['item1', 'item2', 'item3'];   $scope.open = function (size) {    var modalInstance = $modal.open({       templateUrl: 'myModalContent.html',   

百篇必看文章 从入门到独立开发【附加源码】持续更新

小项目实战+源码+教程 叶湘伦:爬虫福利 之 妹子图网MM批量下载 叶湘伦:用python来测试下 2019 你一共写了多少行代码? 叶湘伦:Python 愤怒的小鸟代码实现:物理引擎pymunk使用 叶湘伦:Python 超级玛丽代码实现:人物行走和碰撞检测 叶湘伦:如何用Python画一只肥肥的柯基狗狗——turtle库绘制椭圆与弧线实践 叶湘伦:如何用Python画一只兔子——turtle库circle()画圆函数的详细用法介绍 叶湘伦:教你一键快速生成后台代码,这样和测试小姐姐聊天的时间

Flask web 开发新手遇到的坑

在Flask的开发的学习过程中,我用的是李辉大神的狼书,在实际学习中遇到的以下坑,与各位分享: 1.flask 的 Submit 按钮提交后并不会跳转,仍然停留在原始输入界面,部分代码如下: forms.py 表单函数 1 class RichTextForm(FlaskForm): 2 title = StringField('Title', validators=[DataRequired(), Length(1, 50)]) 3 body = CKEditorField('Body', v

移动端开发的坑【持续更新...】

现在大家基本都是使用智能手机,貌似手机上的浏览器也都比较高级,还基本都是webkit内核,乍一听,好像看到了希望...可是,移动端的坑并不比IE少,并且因为调试没有PC上那么方便,貌似更难了... 简单总结几个自己在平时开发遇到的相对浅的坑,先预预热. 一 安卓手机叠加区域高亮:这是我看网上的人起的名字,表现就是点击的时候一片阴影,对功能没什么阻碍,就是不好看: 解决方案:{-webkit-tap-highlight-color:rgba(0,0,0,0)}; 二 部分浏览器无法自动播放音频:

java后台开发踩过的坑-集锦-不断更新

2015-1-6: idea从14升级到15后,发现 import javax.servlet.AsyncContext; 找不到,右击工程,open module setting,找到图中的位置,在classPath里添加tomcat的servlet-api.jar即可.

Web开发中常见的兼容性解决方案(持续汇总...)

大纲 问题背景 HTML篇 CSS篇 Javascript篇 参考资料 问题背景 由于市场上浏览器种类众多,而不同厂商的浏览器其内核亦不尽相同,甚至同一厂商,不同版本之间的浏览器解析都有所不同.所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因. 我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容.同一个功能我们可能有很多不同的代码实现方式,我们尽可能的选择兼容性高的写法. HTML篇 CSS篇 Javascript篇 参考资料 结束语 每个程序员一生要学习1

H5填坑笔记--持续更新

最近一直在做移动端的页面,发现很多的坑,这里做一下总结,填填坑…… css常见的问题(一) 一.iOS键盘首字母自动大写 IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的. 在iOS中,默认情况下键盘是开启首字母大写的功能的,如果业务不想出现首字母大写,可以这样: <input type="text" autocapitalize="off" /> 二.iOS输入框默认内阴影和样式问题 在iOS上,输入框默认有内部阴影,但无法使用

JAVA开发求职及职业发展必备(持续更新中)

求职阶段 1.经验: 1~2年:初级,2~4年中级,3~6年高级(实际与个人能力相关) 2.学历: 专科(一般).本科(一般).研究生及以上,也不排除个别能力出众者是初中或者高中学历. 3.外语: 一般为英语CET 4/6,但不一定代表实际水平,一般要求读懂常见单词即可! 部分企业对日语.英语等要求可能较高,特别是外企要求更高! 4.思想:     OOA.OOP.OOD,抽象能力,OPA.OPP.OPD,软件开发基本流程,种类 5.Java基础: 相关基本概念: 熟悉java基本数据类型及其包

iOS横竖屏的一些坑(持续更新)

最近在做视频类的App,遇到视频滚动播放的坑,紧接着就是横竖屏问题.之前太过天真不想做横竖屏配置.只是淡出的旋转视频View,但是分享什么的包括AlertView还是竖屏样式,项目着急上线(1周提交一次也是够了...人家审核都烦了估计)也就一直没改.昨天开始改才发现是一个深坑! 因为首页是滚动播放,不想做横屏适配,看了下目前主流App,搜狐做的貌似是最好的.具体想过如图 他们横屏转动的时候后面的tableView不动的,当初就是看了一眼就天真的以为只是转动个view,其实还是竖屏...但是 紧接