UC~移动端的IE!!!坑总结

1、接入过WAP版支付宝支付的应该会发现,支付宝页面在UC中巨丑,完全就是诺基亚时代的网页。你可能会怪它是支付宝的问题吧。但你用QQ浏览器打开,很好啊;你在电脑用火狐、Chrome打开都很好啊;那你试试用IE打开,看到了吧。真不得不吐槽,UC不是被阿里收购了吗,怎么UC跟支付宝还是没沟通好!

2、不支持 vh、vw 单位。vh是view height,vw是view width的意思,这个单位是指长度为屏幕高度和宽度的百分比,在移动端这么多不同规格的屏幕中这个单位十分重要,但是UC居然不支持,现在的最新版是10.6.2(2015年9月),但是仍然不支持。在微信和QQ浏览器中都好好的,就它是乱了。也罢,现在做个H5展示页面能在微信中传播也就够了,其它浏览器都直接忽略吧。

3、Animate.css动画库(CSS3)在UC中大部分有白屏的现象。本来还想这个这么方便的动画库能愉快地使用了,没想到,呵呵……也只能用在微信页里面了。

4、绝对定位的绝对居中点击与显示的位置不一致,这里说的定位是指

position:absolute; top:0; left:0; right:0; bottom:0; width:80%; height:50%; 

这种定位方式在非IE<8的浏览器中的效果都是居中,但是在UC中不是!在UC中它显示的是最上最左,但是它的点击位置是居中。就比如这个div里面有一些表单,你在看到的地方点它是没有反应的,而你把它想像成是居中的位置,点它就行,OK,UC你赢了,我还以为是我手机的触屏坏了呢!

更多问题持续发掘中……

时间: 2024-10-22 01:08:22

UC~移动端的IE!!!坑总结的相关文章

H5移动端的一些坑、、、

H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度,为一个正整数,或字符串'device-

移动端浏览器爬坑之旅

以前总觉得移动端页面也很容易写,最近才下笔,简直五步一坑,十步一雷.查阅了些资料,整理出了部分浏览器兼容性bug. 有问题就跟浏览器客服提出来,一般他们是会处理的.那么就以二师兄展开本次分享. QQ浏览器X5内核问题汇总 https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/ 微信浏览器 因为微信浏览器屏蔽了一部分链接图片,所以需要引导用户去打开新页面,可以用以下方式判断微信浏览器的ua function is_weixn(

总结在移动端碰到的坑

一.安卓设备的select options的坑,尽量使用各浏览器内核都支持的api 在添加 OPTION 元素时 如果需要向指定索引前插入 OPTION,可以使用 options.add(option, index): 如果需要向 SELECT 尾部添加 OPTION,可以使用 options.add(option): 如果需要向指定索引处添加(或更改) OPTION,可以使用 options[index] = option. 在删除 OPTION 元素时 如果想删除指定索引处的 OPTION

移动端的爬坑路

暂时有几个常见的需要注意一下,防止被坑. 1.手机浏览器会突然缩小顶部栏或者干脆消失.这是由于使用了浏览器默认滑动事件造成的.所以整体项目要么都使用滑动事件,要么就只使用touch滑动事件,比如better-scroll.2.ios对h5css position属性支持是有些问题的,比如fixed与input同时使用,会造成input获得焦点fiexd布局失效,这是对fiexd不友好支持所造成. 3.布局是移动端的一大坑,特别是一些属性其实很多手机厂商深度优化后的系统浏览器支持的不是很好,比如华

移动端开发的坑【持续更新...】

现在大家基本都是使用智能手机,貌似手机上的浏览器也都比较高级,还基本都是webkit内核,乍一听,好像看到了希望...可是,移动端的坑并不比IE少,并且因为调试没有PC上那么方便,貌似更难了... 简单总结几个自己在平时开发遇到的相对浅的坑,先预预热. 一 安卓手机叠加区域高亮:这是我看网上的人起的名字,表现就是点击的时候一片阴影,对功能没什么阻碍,就是不好看: 解决方案:{-webkit-tap-highlight-color:rgba(0,0,0,0)}; 二 部分浏览器无法自动播放音频:

移动端视频踩坑实录

最近刚结束一个移动端涉及视频播放的小项目,踩了不少坑,现记录在此: 1.ios系统中让视频宽高都100%铺满所在父层 设置width="100%" height="100%"在ios中是无法实现宽高都100%的,应该设置 video 的样式: width:100%; height:100%; object-fit:fill; 2.安卓系统中禁止视频全屏 playsinline只能禁止ios全屏,不能禁安卓全屏,要在安卓禁止视频全屏须在 video 中设置 x5-pl

移动端遇到的坑

1.移动端maxlength不起作用 <input type="text"  maxlength="5" />   效果ok,当 <input type="number"  maxlength="5" />时maxlength失效,长度可以无限输入. 解放方案: <input type="number" oninput="if(value.length>5)va

HTML 5 Audio/Video DOM canplaythrough 事件在移动端遇到的坑

canplaythrough 事件定义和用法 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件. 当音频/视频处于加载过程中时,会依次发生以下事件: loadstart durationchange loadedmetadata loadeddata progress canplay canplaythrough 浏览器支持 所有主流浏览器都支持 canplaythrough 事件. 注释:Internet Explorer 8 或

移动端开发 经典坑 第二弹(持续更新)

1. translate 3d 容器中文字出现模糊 当容器的 translate 3d 属性中出现小数的时候,容器中的文字就会有一定的模糊,当该属性为*.5的时候,模糊的现象最严重. translat3d(-341.5px, 0px, 0px); 当这个值为整数的时候,就ok 解决的方案是更新容器的宽度,使之能被整除. 2. 移动端 img标签下缝隙问题 问题描述:在移动端布局的时候,img标签和下方容器会有1px的缝隙 这个问题一般也会出现在pc端的ie 浏览器中. 解决:移动端的解决是