前端开发在uc浏览器上遇到的坑

                              关于uc 的flex 和textarea 的width:100%;

这些天再做一个wap的项目,本想着手机上不用考虑兼容性问题,可以大刀阔斧搞,fuck ie678!

在pc上完成页面开发,在chrome模拟器上做页面的矫,good!一切看起来都是很美好的样子~~

打开手机测试页面,想想都有点小激动呢!扫码,。。。。。。。。。。卧槽,啥浏览器这是!卧槽,这是uc吗!

尼玛,居然我的一个最简单页面都不能正常显示,毕竟只是只有两个textarea的页面啊,我擦,这都能出错!??@@...

检查了代码,测试了其他浏览器只有uc是这样,textarea宽度设置width:100%;并不能全屏。console了body和textarea的宽度,分别是360 和348。后来发现居然有uc开发版,可以pc调控手机,大喜过望,然并卵。。。并没有发现多余的padding和margin,而且除了textarea别的标签都可以100%。

测试连接:http://jielan.sinaapp.com/4.html

项目逼近,必须得把这个丑陋的输入框改掉啊!

除了设置宽度100%还有别的方法么,卧槽,对了,display:flex;后来我给textarea找了个父元素宽度100%,textarea就flex:1;忐忑中再次扫码,凑!好样的,就是我要的100%!

好哒,解决了剩下的那一个,如法炮制就ok了,哈哈,真是佩服自己的机智。加父元素,复制css,ctrl+s,扫码。

卧槽,傻了,尼玛怎么都是一半的宽度。

( ⊙ o ⊙ )是的!就酱紫,项目逼近啊。。。肿么办!!!只有特么的uc!!!fuck uc!!!╮(╯▽╰)╭,还得解决问题啊,试了很多属性都不行。最后删除复制错了,尼玛居然ok了。

父元素去掉display:flex;子元素都是flex:1.宽度100%;就这样uc就是全屏了。

别问我为什么,可能这就是爱吧。。。爱是解释不清楚的。。。

另外,如果你的flex元素是input你需要给它指定display:block才能让它去自适应宽度。还有inpu要写明高度height,不然你一输入就是高度变低,然后在恢复回去,真是奇葩哦。。。。。。

别问为什么,可能真的就是uc的爱        

时间: 2024-08-27 01:11:09

前端开发在uc浏览器上遇到的坑的相关文章

web前端开发中的浏览器兼容性总结

1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象:但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的

对网站前端开发工具和浏览器的介绍

Web 前端开发工具 1.NotePad ① 占用内存小,微软自带,免安装. ② 不方便编辑代码,一次只能打开一个文件. ③ 不可扩展插件,写代码效率低. ④ 对于代码缩进不太友好. ⑤ 通常来说支持基本的纯文字编辑工作.格式不是很好控制. 2.EditPlus ① 小巧但功能强大,占用内存小. ② 颜色标记智能代码提示以及高亮显示. ③ 同时编辑多个文件 ④ 可支持各类丰富的插件. ⑤ 支持代码高亮显示,并且支持多种语言. ⑥ NotePad开源且跨平台. ⑦ 方便编辑代码.可以同时编辑多个文

Mobile&Web前端开发:移动浏览器的viewport实例分享

对于移动web开发.quirksmode.org有两篇文章详细介绍了Ataleoftwoviewport12感觉非常好,最好了解一下viewport概念.原本想翻译的但这两篇文章实在太长了没耐性,于是抽取了其中重点讲viewport局部,用半翻译半自己写的方式写出来,这也是为了让自己能够理解得更好一些. 其中CSS像素和设备像素的概念.要想了解得更清楚还是推荐看看那两篇文章.以下图片均来自http://quirksmode.org还有js获取各种宽高和位置的内容都没有提及. 桌面浏览器 先说说桌

在UC浏览器上很炫的一个效果

效果简述: 这个效果将会强行去除UC浏览器的网址输入框和底部的菜单栏,这样网页将会占据整个手机界面.感觉看起来很像是一个APP. 浏览器界面右下角将会出现一个向上的标志,用来唤出简单的菜单栏. (界面是用jquery-mobile通过简单修改做出来了,还有些问题,包涵.本人phper) 效果代码: 在head里面添加 <meta name="viewport" content="initial-scale=1, width=device-width, maximum-s

移动前端开发一定会遇上的事

1. 点击图片,链接,甚至是空白的框框,会产生一个淡蓝色的透明背景,pc上没事.这个怎么处理? 在css中增加一行样式 body {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} 功能是去掉高亮色,r,g,b,透明度. 只在webkit核心的浏览器上尝试验证有效 2.禁用点击input时调出手机上的软键盘 一招致命:添加input 的readonly属性就可以了.听说用style="ime-mode:disable";有效,但是我没有成功

前端开发JavaScript清除浏览器缓存的方法

查看和删除浏览器缓存的方法=====>打开 最近在开发项目中发现有时候总要频繁地清除浏览器缓存,不然总是显示的过时的信息 浏览器缓存有利有弊,有些数据需要缓存下来使得页面打开更快提高网站性能,但有些缓存内容又必须清除,缓存可能会导致一些错误数据被展示. 介绍一些清除浏览器缓存的方法: 方法一:利用meta标签 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV=&quo

解决UC浏览器或微信浏览器上flex兼容问题

在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */

2015年3月-前端开发月刊

1. 创业 2. 职业|项目管理 3. git 4. 知乎(zhihu) 5. 其它 6. Angular 7. 看书学习 8. 移动开发 9. Html5 10. CSS3 11. Javascript 前言: 技术只是一种手段,不是目的.人生的投资有很多种,很多个方向.技术只是其中的一个方向,是目前兴趣的所在点.兴趣会随着岁月的流逝,年龄的增长,会发生变化. 当然鸡蛋不能放在一个篮子里边,所以, 有空的时候提前看看,创业类的,产品,市场,营销类的书籍,提前给自己找点出路,免得后期技术路线走不

UC浏览器的‘过滤广告’开关导致页头下载块不显示

在工作中调试发现这个问题的,发现在自己的开发环境上,用UC和其他浏览器打开都没有问题,但是线上环境上,其他浏览器显示页头下载,在UC浏览器上不显示 这里就不用本公司项目做展示,就随便用一个大公司的做展示. 如图,一般UC默认都会打开‘广告过滤’按钮,可以在设置里看到如下图: 此时,京东母婴馆页头是不显示下载APP那块的,如下图: 关闭UC‘广告过滤’按钮,还是原来的页面,刷新一下,显示下载APP块了,原来是UC把这个识别为广告了 原来是浏览器的问题,我的开发项目里也有页头下载,也被识别成了广告,