移动端常见bug

最新推荐文章于 2023-02-10 15:54:21 发布
最新推荐文章于 2023-02-10 15:54:21 发布
阅读量341 收藏
点赞数
分类专栏： 移动 文章标签： 移动端 移动端样式

移动端常见bug整理

原文链接

点击样式闪动

屏蔽用户选择

移动端如何清除输入框内阴影

禁止文本缩放

如何禁止保存或拷贝图像

解决字体在移动端比例缩小后出现锯齿的问题

设置input里面placeholder字体的大小

audio元素和video元素在ios和andriod中无法自动播放

手机拍照和上传图片

输入框自动填充颜色

开启硬件加速

用户设置字号放大或者缩小导致页面布局错误

移动端去除type为number的箭头

实现横屏竖屏的方案

bestvist
关注
专栏目录
移动端常见bug/兼容01
weixin_36106791的博客
08-17 210
前言 工作中接手做过一些移动端的项目，在开发过程中，发现了一些问题，结合网友的一些经验总结，整理下移动端常见的问题，希望对大家有用。 点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。 A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：div,input(selector) {- we
移动布局中的 4. 移动端开发选择 5. 移动端技术解决方案 6. 移动端常见布局
chenyiboke的博客
11-19 424
4. 移动端开发选择 1. 移动端主流方案 1.单独制作移动端页面（主流）： 京东商城手机版、淘宝触屏版、苏宁易购手机版。 2.响应式页面兼容移动端（其次）三星手机官网。 2.单独移动端页面（主流） 通常情况下，网址域名前面加m（moblie）可以打开移动端。通过判断设备，如果是移动设备，如果是移动设备打开，则跳转到移动端页面。 比如： m.taobao.com m.jd.com ...
web移动端常见BUG
xiongxing90的博客
03-15 3500
web移动开发常见bug(1)
移动端常见bug及解决办法
fgndsg的博客
09-29 480
一：iPhone中 overflow:scroll 横向或纵向滑动速度慢或者卡，感觉很不流畅，只需要对滚动元素设置： -webkit-overflow-scrolling:touch; overflow-scrolling:touch; 二：flex布局下，子元素A设置了固定宽度，但由于另一个子元素B内容过宽导致A元素被挤压，实际宽度不是原来定义的宽度，此时需要对A元素设置： flex-shrink:0; A元素将不会再被挤压 三：ios和android下点击元素时出现灰色阴影背景 -webkit-tap
移动端BUG汇总
u011927449的博客
08-06 197
position:fixed问题 固定定位到底部会把最后一个元素盖住你会发现最后一个字被盖住了，并且还滚动不下去。 解决方法： 给后一个元素添加一个高度，或者给body加margin-bottom代码如下： <p> 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 什么什么什么什么什么什么什么啊啊啊啊 </p> <div id="box"></div> <style> body::afte
移动端常见BUG及解决办法
weixin_42924048的博客
01-11 481
一：iPhone中 overflow:scroll 横向或纵向滑动速度慢或者卡，感觉很不流畅，只需要对滚动元素设置： -webkit-overflow-scrolling:touch; overflow-scrolling:touch; 二：flex布局下，子元素A设置了固定宽度，但由于另一个子元素B内容过宽导致A元素被挤压，实际宽度不是原来定义的宽度，此时需要对A元素设置： flex-shri...
H5移动端常见问题
happy任的博客
04-13 2260
h5 常见问题 1. H5 页面窗口自动调整到设备宽度，并禁止用户缩放页面 一、HTML 页面结构 // width 设置 viewport 宽度，为一个正整数，或字符串 'device-width' // height 设置 viewport 高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // mi...
css/div/兼容性及常见bug
qq_45271323的博客
05-13 1725
清除浮动的几种方法 首先，为什么会有清除浮动这一说法？ 当有一个父元素里面包含一个子元素或者多个子元素时，给子元素设置浮动，那么会父元素的高度就为0啦，也就是我么常说的高度塌陷。如何解决？ 给父元素添加height 原理：如果父元素没有定义高度，那么父元素的高度完全由子元素撑开，给他定义了高度，就解决了父元素无法自动获取到高度的问题。 在标签结尾处加空标签 ，给空标签添加clear:both 原理：添加了空标签，利用CSS提高的clear:both清除浮动，让父级元素能自动获取到高度。**优点：*
移动端H5常见问题以及解决方案
bufanweb的博客
07-16 1393
移动端H5常见问题以及解决方案 问题 下面列举了我遇到的一些常规问题,如有遇到其他问题的请在评论区补充,之后我也会实践加以补充,感谢! 以下解决方案,均经过我测试成功,健康安全,请放下食用.由于篇幅问题,某些非核心的解决方案的实现细节暂未谈论,需要的自行研究. 1.iOS滑动不流畅 表现 上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动.整体表现就是滑动不流畅,没有滑动惯性. 产生原因 为什么在iOS的webview中滑动不流畅,它是如何定义的?* 最终我在safari文档里面寻找到了答案(文
移动端常见bug（5）
xxy77721的博客
09-27 420
1、长时间按住页面出现闪退 ? 1 2 3 element {   -webkit-touch-callout: none; } 2、iphone及ipad下输入框默认内阴影 ? 1 2 3 Elemen
移动端bug
zyqgt960812的博客
09-28 138
1、出现横向滚动条； 移动端页面通常宽度为100%；如果此时再给页面的某一部分添加padding 值就会导致横向滚动条的出现； 解决： calc() 此CSS函数让你在声明CSS属性值时执行一些计算 语法： width: calc(100% - 80px); // ±×÷运算符都可使用 减去加的padding值即可； ...
移动端BUG
weixin_30906185的博客
07-24 134
1.解决 Android 系统 设置line-height和height相同，文字却偏上显示（pc端和ios都显示ok） 行高设置为normal 则可以解决。 然后高度通过padding填充 line-height: normal; 2.H5移动端ios/Android兼容性总结 https://www.jianshu.com/p/c55d4ef43859 转...
移动端bug总结和一些奇淫技巧
Teal01的博客
09-03 5187
我自己的总结： 1、uc浏览器的flexbox兼容性bug，在父元素上应用flex属性时，子元素要display: block，否则没有效果。 2、android上的uc浏览器父元素display:flex，子元素margin:auto水平垂直居中没效果，加上justify-content和align-items为center即可，在低端android版本上需要再加上text-al
移动端bug整理
weixin_42863883的博客
01-07 190
重绘相关 safari浏览器textarea标签的placeholder多行时显示不全 ios键盘收起页面错位 手机兼容bug汇总-之前记录的 其他 移动端-富文本链接处理
移动端常见bug（4）
xxy77721的博客
09-27 464
1、顶部状态栏背景色 ? 1 meta name="apple-mobile-web-app-status-bar-style" content="black" /> 说明： 除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不
移动端开发遇到的bug记录
time_goes的博客
02-10 208
点击‘回到顶部’时，先将checkbox隐藏，display：none， 再显示，通过隐藏显示造成页面变化，这样快速滚动时checkbox也不会突然消失。
移动端遇到的bug (长期更新)
weixin_30378311的博客
08-01 173
移动端遇到的bug border-radius和transform在一起的bug 当父级设置了border-radius+overflow:hidden的时候，圆角是可以包住子级的，这是个很常见的场景。 但是当子级设置了transform属性后，bug就发生了。 准确来说是在移动端才会发生bug, pc端是正常的，具体的表现是: 父级的圆角无法包住 运动中的子级。 解决方法也很简单，就是在父级添...
移动端页面开发bug记录 多年总结 长期更新
weixin_40046130的博客
11-27 276
作为一个开发了多年的移动前端选手 遇到的bug比你吃过的饭都咸 1 input输入框 点击没反应或者多点几次 ios: 不好点击 需要点好多次才会弹出输入法 ：解决 外部加个div click 使input.focus() 安卓： 无 2input 光标光标特别大 比字体还大 ios: 去掉高度 使用padding撑起 （ios光标会跟着input的高度而不是字体的高度）、 安卓：Im fine thank you 3做页面动画 运动的图片会在最高层 使一些遮挡失效 ios： 我有...
移动端遇到的bug个解决方法
曲小强
03-16 564
内容并不是很全，以后每遇到一个问题都会总结在这里，分享给大家！ 一、meta标签的相关知识1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。 1 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=...
2023年移动端H5通常开发流程
最新发布
07-16
2023年移动端H5通常的开发流程如下： 1. 需求分析和规划：首先，确定移动端H5的需求和目标，包括功能要求、用户体验、界面设计等，并...这是一个常见的移动端H5开发流程，具体的步骤和细节可能根据实际情况有所不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值