前端开发在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的爱
前端开发在uc浏览器上遇到的坑的更多相关文章
- 前端开发在手机UC浏览器上遇到的坑
1.user-scalable问题 写手机页面都会加一个meta标签 <meta content="width=device-width, initial-scale=1.0, max ...
- web前端开发中的浏览器兼容性总结
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...
- 在UC浏览器上很炫的一个效果
效果简述: 这个效果将会强行去除UC浏览器的网址输入框和底部的菜单栏,这样网页将会占据整个手机界面.感觉看起来很像是一个APP. 浏览器界面右下角将会出现一个向上的标志,用来唤出简单的菜单栏. (界面 ...
- 前端开发JavaScript清除浏览器缓存的方法
查看和删除浏览器缓存的方法=====>打开 最近在开发项目中发现有时候总要频繁地清除浏览器缓存,不然总是显示的过时的信息 浏览器缓存有利有弊,有些数据需要缓存下来使得页面打开更快提高网站性能,但 ...
- 前端开发,走浏览器缓存真的很烦,拒绝浏览器走缓存从meta标签做起!
<meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv ...
- 92.vue---新手从本地项目开发到服务器线上运行爬坑。
因为我做的是后台,所以不用做SEO 参考 本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发.因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余.如果你的项目不关注这方面的问题,也 ...
- 解决UC浏览器或微信浏览器上flex兼容问题
在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...
- 【收藏】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- 【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
随机推荐
- cordova通过指纹插件进行指纹验证
原文:cordova通过指纹插件进行指纹验证 版权声明:本文为博主原创文章,转载须注明出处,博客地址:https://blog.csdn.net/wx13227855087 https://blog. ...
- 2013级别C++文章9周(春天的)工程——运算符重载(两)
课程主页中:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [程序阅读]阅读程序"简单C++学生 ...
- vista/win7系统 红警/CS/星际争霸 局域网连接方法
昨晚,闲来无事,忽然想起打红警来,于是和宿舍舍友商量一起联机打红警, 可是在win7下不能联机红警,网上很多人都这么说,昨晚我折腾了2小时,终于解决了这个问题. win7系统是可以联机打红警的!!!! ...
- Array方法总结
一.不影响原数组产生一个新数组 slice:切片->返回新数组->复制数组:arr.slice(0) arrayObject.slice(start,end): 切片 var arr= [ ...
- 【每日一句】make a scene
scene有场面.场景的意思,只是make a scene可不是指做场面.scene还有还有一个意思,指很生气而大吵大闹(的情景),因此make a scene就是指某人情绪失控发脾气.如今一起从以下 ...
- hdu1180奇怪的楼梯……bfs迷阵……wa该16二级,我太渣滓
#include<iostream> #include<queue> #include<cstring> using namespace std; int row, ...
- 使用Eclispe 查看api技巧
使用eclispe都会知道当我们把鼠标的光标放到指定发方法上时程序会弹出一个提示,大家不要无论这个提示这个提示就是源码中的说明包含了函数參数使用方法 非常多时候我们碰到一个不会的方法的时候第一步都会选 ...
- 双显卡安装Fedora 20
电脑CPU上有核芯显卡,独立显卡是Nvidia的GeForce.在安装Fedora 20 64位的时候,通常会有一个优先级.在电脑BIOS中有一个显卡的启动选项,PCIe或者IGFX,PCIe是独立显 ...
- Ajax打开三种页面的请求
xmlhttprequest对象可以打开两种方式的页面请求 1,.asmx格式的webservice页面. 2,.aspx格式的web窗体 其中web窗体可以是调用一新建的web窗体,同时调用和被调用 ...
- Python 辨异 —— __init__ 与 __new__
__init__ 更多的作用是初始化属性,__new__ 进行的是创建对象,显然 __new__ 要早于 __init__ 发生. 考虑一个继承自 tuple 的类,显然在 __init__ 无法对其 ...