zoukankan      html  css  js  c++  java
  • 前端开发在手机UC浏览器上遇到的坑

    1.user-scalable问题

    写手机页面都会加一个meta标签

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

    maximum-scale=1.0, user-scalable=0通过禁止用户手动缩放和最大放大比例是1来防止用户手指动作导致页面放大页面失衡。然而这个对uc并没有什么卵用。。。如下图(被拉伸淘宝wap页面):

    2.apple-touch-icon问题

    在uc的开发者文档里有这样一段话


    然而按照上述方法设置了桌面图标生成的依然是uc默认的图标。但是其它浏览器就可以正常的生成我们指定的桌面图标

    3.安卓机textarea实现100%的问题

    如我我们想实现一个满屏宽度的文本编辑框,可以display:blcok;100%;得以实现,然而在安卓的uc下并不能完成我们的想法。测试链接http://jielan.sinaapp.com/4.html

    它的宽度会比屏幕的宽度小12px。详情见:http://www.cnblogs.com/happycloud/p/4585696.html

    4.键盘弹出事件触发不会改变浏览器视窗大小的变化

    例如微信底部评论功能的输入框,当我们输入内容弹出键盘时,输入框应该在键盘的顶部。键盘弹出改变浏览器view的大小,在自己的wap站点实现类似功能的时候,发现uc并没有把输入框顶到键盘上面。测试其他浏览器均可以,后测试发现,uc浏览器在键盘弹出时并没有导致浏览器view的高度发生变化,视窗还是原来的大小,页面不会被“挤”上去。

    5.fixed定位的元素在滚动的时候会消失

    比较常见,不在赘述

    6.开发版uc浏览器页面滚动会导致text-indent属性失效

    http://m.1688.com/shengyijing_search/--139.html可以用来测试

    7.input输入框未指定高度,focus后高度发生跳动,需要指定display:block;才可以使用:flex:n;

  • 相关阅读:
    es6模块与 commonJS规范的区别 Linda
    hive 子查询特别分析
    C语言I博客作业05
    C语言I博客作业08
    2019秋作业第一周作业
    C语言I博客作业04
    C语言I博客作业09
    C语言I博客作业03
    C语言I博客作业07
    C语言I博客作业06
  • 原文地址:https://www.cnblogs.com/happycloud/p/4753694.html
Copyright © 2011-2022 走看看