前端开发在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前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
随机推荐
- MATLAB Toolbox Path Cache is out of date and is not being used的解决
作者:朱金灿 来源:http://blog.csdn.net/clever101 使用mcc编译MATLAB\R2009a\extern\examples\compiler目录下的hello.m,编译 ...
- vue sourcemap详解
从webpack开始 直接进入正题.有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手 ...
- IIS执行原理
IIS执行原理 服务器的监听(IIS6.0+版本) 当请求到达服务器时,请求最终会到达TCPIP.SYS驱动程序,TCPIP.SYS将请求转发给HTTP.SYS网络驱动程序的请求队列中(可以理解为 ...
- APP和服务端-架构设计(二)
1. App架构设计经验谈:接口的设计 App与服务器的通信接口如何设计得好,需要考虑的地方挺多的,在此根据我的一些经验做一些总结分享,旨在抛砖引玉. 1.1 安全机制的设计 现在,大部分App的接口 ...
- WPF与缓动(一) N次缓动
原文:WPF与缓动(一) N次缓动 WPF与缓动(一) N次缓动 ...
- 【Android先进】如何使用数据文件来保存程序
在程序,有许多方法来存储和检索数据,本文,它描述了如何使用文件系统来保存数据编程和读取操作 我直接写了一个帮助类,进行文件的写入和读取操作 /** * 用于在文件里保存程序数据 * * @author ...
- iOS_9_scrollView分页
最后效果图: BeyondViewController.h // // BeyondViewController.h // 8_scrollVIew分页浏览 // // Created by beyo ...
- MVC 创建强类型视图
•在ViewModel中创建一个类型 •在Action中为ViewData.Model赋值 •在View中使用"@model类型"设置 14 手动创建强类型视图 •在ViewMod ...
- 使注解@ContextConfiguration同时支持locations和classes
@Configuration @ImportResource("classpath:META-INF/dataContext.xml") class TestConfig { } ...
- git/github初级运用自如 (good)
三 . 设置用户信息 这一步不是很重要,貌似不设置也行,但github官方步骤中有,所以这里也提一下. 在git中设置用户名,邮箱 $ git config --global user.name &q ...