美文网首页
移动端布局常见问题

移动端布局常见问题

作者: 程少辉 | 来源:发表于2017-11-07 17:08 被阅读0次

    移动端布局常见问题

    1 横竖屏限制问题

      <meta name="x5-orientation" content="portrait | landscape" />
    

    只支持x5内核,指的是强制进行横屏或竖屏,portrait是竖屏,landscape是横屏。

      <meta name="screen-orientation" content="portrait">
    

    只支持uc浏览器,指UC浏览器强制竖屏。

    2 全屏限制问题

      <meta name="x5-fullscreen" content="true" />  
    

    只支持x5内核,只QQ应用模式,强制全屏。

      <meta name="full-screen" content="yes">
    

    只支持uc浏览器,指UC强制全屏。

    3 禁止识别电话号码和邮箱

      <meta name="format-detection" content="telephone=no, email=no" />
    

    禁止识别后,页面当中所有的邮箱和电话将不会被识别,如果有特殊需求,要配合一下代码实现

      <a href="tel:110">请拨打电话110</a>
      <a href="mailto:qq@.com">请发送邮件qq@.com</a>        
    

    4 消除链接、表单、按钮默认背景

    .box{
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    

    对表单、链接、按钮的默认背景设置成全透明,从而进行该样式的消除。

    5 消除按钮圆角

    .box{
      -webkit-appearance: none;
    }
    

    在应用开发中,经常会遇到ios端和安卓端的样式显示不一样,例如同一按钮(样式一样)会显示不一样的颜色,导致项目整体的搭配不是很好。利用-webkit-appearance: none,就可以去除浏览器默认样式。

    6 移动端字体

    • ios系统
      • 默认中文字体是Heiti SC
      • 默认英文字体是Helvetica
      • 默认数字字体是HelveticaNeue
      • 无微软雅黑字体
    • android 系统
      • 默认中文字体是Droidsansfallback
      • 默认英文和数字字体是Droid Sans
      • 无微软雅黑字体
    • winphone 系统
      • 默认中文字体是Dengxian(方正等线体)
      • 默认英文和数字字体是Segoe
      • 无微软雅黑字体
    • 结论
      • 各个手机系统有自己的默认字体,且都不支持微软雅黑
      • 如无特殊需求,手机端无需定义中文字体,使用系统默认
      • 英文字体和数字字体可使用 Helvetica ,三种系统都支持
      body{
        font-family:Helvetica;
      }
    

    7 禁止用户设置字体大小

    .box{
      -webkit-text-size-adjust:100%
    }
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    

    解决手机横屏时默认文字会放大的问题。当text-size-adjust 设为 none 或者 100% 时,则关闭字体大小自动调整功能。

    8 禁止文字选中

    .box{
      -webkit-user-select:none  /*安卓不支持*/
    }
    

    安卓上通过以下javascript代码解决:

    document.addEventListener("touchstart",function(e){e.preventDefault})
    

    当你不希望用户在你的网站上选择文本时,一种方法是利用js来实现,另一中方法是将-webkit-user-select-moz-user-select 的值设为none
    请谨慎使用这个属性:因为大部分用户是来查看信息的,他们可以复制并存储下来以备将来之用,所以这种方法既无用也无效。如果你禁用了复制粘贴功能,用户还是可以通过查看源文件来获取到他们想要的内容。

    9 字体增强 font boosting

    移动端设备为了使用户能看清楚大批量的字体,会自动对字体进行放,但是只要指定了容器的高度,就能解决。

      p{
        max-height:9999999px;
      }
    

    10 调用原生滚动事件

    .box{
      -webkit-overflow-scrolling:touch
    }
    

    使用具有回弹效果的滚动,当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。

    该属性的值也可以为auto,表示使用普通滚动,当手指从触摸屏上移开,滚动会立即停止。

    11 CSS动画页面闪白,动画卡顿

    解决方法:

    • 尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位
    • 使用 CSS3 动画的时尽量利用3D加速,从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility 隐藏
    .box{
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    

    12 fixed定位缺陷

    • ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
    • android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
    • ios4下不支持position:fixed

    解决方案: 可用iScroll.js插件解决这个问题

    13 阻止旋转屏幕时自动调整字体大小

      html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
        -webkit-text-size-adjust:none;
      }
    

    text-size-adjust 设为 none 或者 100% 时,则关闭字体大小自动调整功能。

    14 上下拉动滚动条时卡顿、慢

    body {
      -webkit-overflow-scrolling:touch; overflow-scrolling: touch;
    }
    

    Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

    15 禁止复制、选中文本

    .box{
      -webkit-user-select:none;user-select:none;
    }
    

    解决移动设备可选中页面文本(视产品需要而定)

    16 ios和android下触摸元素时出现半透明灰色遮罩

    .box{
      -webkit-tap-highlight-color:rgba(255,255,255,0)
    }
    

    设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。

    17 关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)

    iOS 浏览器横屏时会重置字体大小,设置 text-size-adjust 为 none 可以解决 iOS 上的问题,但桌面版 Safari 的字体缩放功能会失效,因此最佳方案是将 text-size-adjust 为 100% 。

    .box{
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    

    相关文章

      网友评论

          本文标题:移动端布局常见问题

          本文链接:https://www.haomeiwen.com/subject/qavjmxtx.html