文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动web端常见bug汇总001

A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。...: none; -ms-user-select: none; user-select: none; 移动端如何清除输入框内阴影 Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow...Q: audio元素和video元素在ios和andriod中无法自动播放 A:代码如下,触屏及播放 $('html').one('touchstart',function(){ audio.play...-- 选择视频 --> 输入框自动填充颜色 Q: 针对input标签已经输入过的，会针对曾经输入的内容填充黄色背景，这是webkit...A:方案如下 1 设置标签的autocomplete=”off”,亲测无效可能 2 设置盒子的内阴影为你常态的颜色（下面以白色为例） box-shadow:0 0 0 1000px #fff

1.9K40

移动端bug汇总（一）

A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。...: none; -ms-user-select: none; user-select: none; 3移动端如何清除输入框内阴影 Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow...中无法自动播放 Q: audio元素和video元素在ios和andriod中无法自动播放 A:代码如下,触屏及播放 $('html').one('touchstart',function(){ audio.play...-- 选择视频 --> 10.输入框自动填充颜色 Q: 针对input标签已经输入过的，会针对曾经输入的内容填充黄色背景，这是webkit...A:方案如下 1 设置标签的autocomplete="off",亲测无效可能 2 设置盒子的内阴影为你常态的颜色（下面以白色为例） box-shadow:0 0 0 1000px #fff inset

1.3K20
您找到你想要的搜索结果了吗？
是的
没有找到

移动端bug汇总（一）

A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。...: none; -ms-user-select: none; user-select: none; 3移动端如何清除输入框内阴影 Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow...中无法自动播放 Q: audio元素和video元素在ios和andriod中无法自动播放 A:代码如下,触屏及播放 $('html').one('touchstart',function(){ audio.play...-- 选择视频 --> 10.输入框自动填充颜色 Q: 针对input标签已经输入过的，会针对曾经输入的内容填充黄色背景，这是webkit...A:方案如下 1 设置标签的autocomplete="off",亲测无效可能 2 设置盒子的内阴影为你常态的颜色（下面以白色为例） box-shadow:0 0 0 1000px #fff inset

3.2K130

H5 项目实用

点击标签产生的灰色半透明背景，能通过设置去掉； //特殊说明：有些机型去除不了，如小米2。...对于按钮类还有个办法，不使用a或者input标签，直接用div标签 a,button,input,textarea { -webkit-tap-highlight-color: rgba(0,0,0,0...// 禁止长按链接与图片弹出菜单 a,img { -webkit-touch-callout: none } // 禁止ios和android用户选中文字 html,body {-webkit-user-select.../*说明：winphone下默认触摸事件事件使用e.preventDefault是无效的，可通过样式来禁用，如：*/ html { -ms-touch-action:none; } //禁止winphone...默认触摸事件 // 阻止windows Phone的默认触摸事件 /*说明：winphone下默认触摸事件事件使用e.preventDefault是无效的，可通过样式来禁用，如：*/ html {

5.2K11

厉害了，15 行代码让 iPhone 崩溃。。

他们公布了一个只有15行代码的网页，访问这个页面就会让iPhone或iPad崩溃。 ? 有人在开原网站github上发布了相关信息，包括bug的源代码，代码只有几行CSS和HTML代码。...只要在CSS的Backdrop-filter里嵌入大量元素，比如标签，就可以耗尽设备的所有资源，造成内核错误(Kernel Panic) 。 ?...“任何在iOS上呈现HTML的页面都会受到影响。”——这意味着如果有人通过社交媒体或电子邮件向你发送这个链接，或者你访问了包含代码的网页，你的设备就有可能崩溃。...根据外媒9to5Mac的说法，“大量计算导致WebKit渲染器过载，系统只能重启内核，也就出现了‘白苹果’，然后导致重启。” 而WebKit正是Safari浏览器使用的HTML渲染引擎。...此前，iOS设备也遇到过类似问题，若干代码或几个特殊字符可能导致设备崩溃，但通常苹果会在下一个系统更新中修复。 话说各位好奇的也可以自己尝试一下下面的地址，用 safari 浏览器打开。

1.2K30

前端页面中 iOS 版微信长按识别二维码的bug 与解决方案

7月1日更新： 建议看完本文再看http://devework.com/weixin-qrcode-bug2.html 一文补充文章。...iOS 版微信6.2 中二维码实际可识别区域为蓝色框部分（请用第五个小指在边缘区细心长按）。本人测试设备为iPad mini2+ iOS8.1 +微信6.2.2.17，其他微信版本没有测试； ? ?...基本上可以确定是iOS 版微信的本身问题，原因应该是微信客户端在识别二维码的时候忽略了微信标题栏+系统状态栏的高度，而这种bug 的促发貌似也是需要CSS 进行特殊定位的情况下才产生的（特别是absolute...6月25日更新：经过与微信 iOS 开发人员的反馈沟通，确定是微信的 bug，据他们的说法目前已经修复，但能否在下一个版本中加入么，就不得而知了。...解决方案 个人在做这个页面时候采取的解决方案是通过将img 标签增大padding 的方式来增大可点击区域（为此padding-bottom 特长）来解决的。

2.2K80

第123天：移动web开发中的常见问题

在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类:active的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止： html {...另外，有些机型去除不了，如小米2。对于此类问题还有个办法，不使用a或者input标签，直接用div标签。 winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉？...9、如何在移动端禁止用户选中内容？...如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉： .user-select-none { -webkit-user-select: none; /* Chrome all / Safari...移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下： <html

1.5K20

WEBAPP开发技巧总结

web一样，维护比较简单，它其实就是一个站点 Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术...当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的 话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–...； 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码 2、HTML5标签的使用...7、学会使用webkit-box 上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...15、iOS中如何禁止用户选中文字 我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。

1.9K20

【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css )

与 webkit 浏览器 ; webkit 内核浏览器 对 HTML5 + CSS3 支持的很好 , 移动端可以放心使用 H5 标签和 CSS3 样式 , 但是如果在 PC 浏览器使用了这些标签 , 可能导致低版本浏览器不兼容的情况...; 二、移动端网页 CSS 初始化 - normalize.css ---- 移动端网页的 CSS 初始化 , 一般使用 normalize.css 样式文件 , 该初始化文件有以下优点 : 对有价值的默认值进行了初始化...; 修复浏览器的相关 BUG ; 实现了模块化 ; 提供了详细的文档 ; 下载地址 : https://necolas.github.io/normalize.css/ normalize.css...Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /...Correct the inability to style clickable types in iOS and Safari. * 2.

87810

前端兼容性

IE6、7、8不支持HTML5、CSS3、SVG标准，可被判定为“极难兼容”。 IE9不支持Flex、Web Socket、WebGL，可被判定为“较难兼容”。...比如： iOS app的UI资源区分@1x、@2x和@3x，这就是指原始分辨率对逻辑分辨率的倍数，被称为设备像素比DPR。...但需要注意的是与手机屏幕分辨率不同，桌面分辨率要除以DPI比例，才是逻辑分辨率。 如1920x1080设置DPI比例=1.25，逻辑分辨率实际为1536x864。...CSS兼容问题 1、不同浏览器的标签默认的内外边距不同 解决方案：*{margin: 0; padding: 0;} 2、图片加a标签在IE9中会有边框 解决方案：img{border: none;}...3、IE6及更低版本中，部分块元素拥有默认高度 解决方案：给元素设置font-size: 0; 4、a标签蓝色边框 解决方案：a{outline: none;} 5、IE9以下浏览器不能使用opacity

1.9K20

【CSS】CSS 层叠样式表 ② ( CSS 引入方式 - 内嵌样式 )

内嵌样式 , 一般将 CSS 样式写在 HTML 的 head 标签中 ; CSS 内嵌样式 语法如下 : 标签选择器 {...定义的 , 可以直接写标签类型 ; 2、内嵌样式示例 内嵌样式 示例 : 将页面所有的 h3 标签 的内容设置为 蓝色 , 字体 20 像素 ; h3...text/css"> td { color: green; font-size:15px; } 将页面所有的 option 标签 的内容设置为 紫色 , 字体 15...> 4、内嵌样式运行效果 下面是代码的运行效果 : 用户注册信息 是 h3 标签内容 , 被设置成 蓝色字体 , 20 像素大小 ; 普通表格 单元格 td 标签中的文本 , 都被设置成了 绿色字体..., 15 像素大小 ; option 下拉列表选项标签 中的文本 , 都被设置成了紫色 , 15 像素大小 ;

4.2K20

移动web开发需要注意的二十点

、HTML5标签的使用 在开始编写webapp时，建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，...当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。...，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写，这个时候你不妨使用-webkit-border-image来定义这个按钮的样式...7、学会使用webkit-box 上一条，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...15、iOS中如何禁止用户选中文字 我们通过指定文字标签的-webkit-user-select:none便可以禁止iOS用户选中文字。

1.9K20

与Ajax同样重要的jQuery（1）

” ² 通过size() / length 打印页面中 class属性为 itcast 的元素数量 ² 通过index() 打印 id属性为foo 的div标签 是页面内的第几个div标签 <scripttype....size()); alert($(".itcast").length); // 通过index() 打印 id属性为foo 的div标签 是页面内的第几个div标签 alert($("div").index...a元素字体变为红色 $(".itcast a").css("color","red"); // 将class属性值为itcast的元素下直接a元素字体变为蓝色 $(".itcast>a").css("color...").html('这是一个空DIV'); // 设置包含p元素 的 div 背景色为黄色 $("div:has(p)").css("background-color","yellow"); // 设置所有含有子元素的...","yellow"); // 从1计数 $("tr:even").css("background-color","yellow");// 从0计数 // 只有一个td的 tr元素 字体为 蓝色 $("

10K60

标签语义化之常用HTML标签

一、布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”，其实是一个错误的理解，导致了很多人过度依赖与滥用DIV标签， HTML提供了我们一共七八十个标签，其中常用的有三十个左右，DIV不过是一个相对的空标签而已...，在很多情况下，我们可以使用其他更合适且更简洁的标签可以替代它。...　　b、通过多重组合，减少不必要的CSS命名 四、语义化标签的使用 　　a、列表：ul、ol、li、dl、dt、dd 　　b、标题：h1~h6 　　c、段落：p 　　d、强调：strong 　　e、表格...：table、tr、td，以及表格的其他成员th、thead、tbody、tfood 附录：常用HTML标签表 红色：结构标签    黑色：行内元素 蓝色：块级元素  绿色：表格元素 灰色：其他标签 定义文档的标题。 定义引用外部文件，如联入CSS样式表。 定义内联的CSS样式信息。 定义内联或外联的客户端脚本，如JS。

1.5K50

基于Webkit的浏览器关键渲染路径介绍

HTML文件字节转变成DOM的过程如下图所示： 主要经历字符编码—》令牌提取标签—》词法分析转变成DOM对象—》依照标签的嵌套关系构建成DOM树； ?...Tips： （1）渲染树并非显示所有元素，而只是占据空间元素，如display: none的元素不在渲染树中，而visibility: hidden的在渲染树中； （2）渲染树包含的内容只是元素的内容及其样式信息...图中的蓝色的Parse HTML表示DOM的构建过程，蓝色的Parse StyleSheet代表CSSOM的构建过程，黄色的Evaluate Script表示JS的执行过程，紫色的Recalculate...Tips： （1）HTML文件中JS文件、CSS文件的位置 通常我们会将css文件放在head标签中，JS文件放置在body标签的后面，这是有一定道理的。...由于JS执行的过程中可能修改DOM和CSS样式，这也就造成了Evaluate Script的执行会阻塞Parse HTML的过程，如果JS中引用未解析到的DOM程序就会报错；如果script标签之前有引入

1.2K90

TDesign 更新周报（2022年4月第1周）

placeholder 默认内容的问题 TreeSelect: 修复 treeProps 中同时传入 key、load 时选中项显示的问题 修正 TreeSelect 的交互行为，与 Select 保持一致...composition-api 重构 BaseTable HTML 结构变更，写过 CSS 样式覆盖的同学需注意更新样式 表头更为使用 th 标签，之前为 td，不符合语义 事件 row-db-click...verticalAlign 不生效问题 右上角出现文字穿透问题 固定表头和固定列，全部使用 CSS sticky 输出样式，组件仅渲染一个表格，表头和表内容 不再分开渲染输出。...Datepicker: 修复区间选择时间，月份/年份选择时间类型异常的问题 InputNumber: 修复不能输入小数点问题 Popconfirm: 修复按需加载样式丢失问题 Select: 修复首次...submit 事件返回参数错误的问题 Toast: 修复最大宽度和文案没对齐的问题 Input: 修复设置 clearable，点击不清除内容的问题 Dialog: 修复 1px 边框在 iOS 上消失的问题

2.4K20

【CSS】CSS 层叠样式表 ③ ( CSS 引入方式 - 外链式 | CSS 样式规则 )

将 CSS 代码 写在外部的 xxx.css 外部样式表文件 中 , 然后 在 HTML 的 head 标签 中 , 使用 导入到 HTML 文件中 , 这样 该 css 外部样式表可以被多个 HTML 文件使用 , 实现了样式共享 ;...在 head 中通过 link 标签 引入 CSS 样式 , 该标签 是单标签 , 需要在标签中设置如下属性 : rel : 设置 当前 HTML 文件 与 被链接的 CSS 文件之间的关系 , stylesheet...> 二、CSS 样式规则 ---- CSS 样式 规则 : 选择器 { 属性名称1:属性值1; 属性名称2:属性值2; } 选择器 设置 CSS 作用于哪些 HTML 标签 ; 具体的 CSS 样式...} 样式为例 : h3 是 选择器 ; color: blue; 设置的是 CSS 样式 键值对 , 字体颜色蓝色 , 键值对之间使用 冒号隔开 , 以 分号结尾 ;

5K20

移动端H5页面开发坑点指南

＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的背景图来代替img标签(一般情况都是用2倍),例如一个div的宽高是100100,背景图必须得200200,...select::-ms-expand { display:none; } 移动端HTML5 audio autoplay失效问题 由于自动播放网页中的音频或视频会给用户带来困扰或不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用...动画页面闪白,动画卡顿,图片错乱的问题 1.尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位 2.开启硬件加速 -webkit-transform...text-size-adjust: 100%; 某些情况下非可点击元素如(label,span)监听click事件,ios下不会触发 针对此种情况只需对不触发click事件的元素添加一行css代码即可...00:00,也就是说ios默认就是从0开始计算的,我们不需要设置后面的时分秒为00:00:00 iOS(safari)标签绑定点击事件无效 iOS(safari)有时候某个标签绑定点击事件无效,加上空的

3K10

HTML5简介，CS与BS架构

更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。...所以为了解决这个问题，涌现了各种热修复框架，但是毕竟都不是官方的，而且难免会有学习门槛，而且不可避免的是这类为修复 bug 而生的热修复框架本身也有 bug 风险。...HTML5 应用的好处也是显而易见，跨平台，因为只需要在 Android 和 iOS 直接写个壳就好了，大大减小了开发成本，而且 web 是实时渲染的，即使有 bug ，可以直接发布就好了，也解决了热修复的问题...不过使用内嵌 HTML5方式开发的应用也不是完美的，在性能体验上是不如原生开发的应用的，IOS相对好一些，但是Android本身版本的碎片化比较严重，所以HTML5应用在Android上的体检比起原生开发的...网页是如何在浏览器上解析的： 我们在打开一个网页的时候，只需要在浏览器上输入一个网址也即是域名，然后回车键一按网站的页面就显示出来了。

2.2K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券