移动端开发基础之常见问题

mnblue
mnblue 发布于 6 天前 浏览:198 类型:原创 - 随笔 分类:手机移动 - 移动端 二维码: 作者原创 版权保护
一、移动端基本环境
     chrome 模拟器
     360浏览器 模拟器(内核也是chrome)
     本地服务器 xampp  使用手机连接相同的wifi

二、移动端常见问题

  1、viewport(可视区窗口)
            默认不设置viewport,一般可视区宽度在移动端为980
           width  可视区宽度 (num ||  device-width)分为数字和设备宽度 (固定数字在一些安卓机上不能识别)
           user-scalable 是否允许用户缩放 (yes || no) ios10以上无效,通过事件解决
           initial-scale  初始比例
           minimum-scale 最小比例    (初始比例最好跟最小比例保持一致,否则就没有意义了)
           maximum-scale 最大比例
         
 <meta name="viewport" content="width=device-width, user-scalable=no,
    	 initial-sacle=.5,minimum=.5,maximum=1"/>


        关于window.devicePixelRatio (像素比)
        像素比 就是把一个像素放大到 N倍 去显示,每个设备的像素比不一样,不能设置,只能获取 (设计图最少要750像素,否则图片会模糊)

  2、常用meta设置
①、 x5内核浏览器包括:QQ浏览器,qq,微信内置的浏览器( 竖屏显示、以及全屏显示)
            
<meta name="x5-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />


②、关于UC浏览器 也可以竖屏显示和全屏显示
         
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">


③、 禁止识别电话号码和邮件
         
<meta name="format-detection" content="telephone=no, email=no" />


④、添加电话号码和邮件识别
        
<a href="tel:18888888888">请拨打电话18888888888</a>
<a href="mailto:qd@qd.com">请发送邮件</a>


   3、移动端默认样式重设
     清楚点击阴影      a, input, button{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
     清楚按钮圆角      button{-webkit-appearance: none; border-radius:0;}
     默认字体             body {font-family: Helvetica;}
    禁止文字缩放 (不允许用户修改字体)          body * { -webkit-text-size-adjust: 100%;}     (在pc端,可以修改chrome最小字号是12的限制)
    不允许文字长按被选中                                   body * {-webkit-user-select: none;  }           部分安卓不兼容,用事件解决



三、移动端的其他问题

1、Font Bosting : 一段文字我们没有设置高度的时候,在webkit内核的浏览器下,文字被放大了
     解决方法:1.设置高度    2.设置最大高度 max-height

2、IOS下,给body加overflow:hidden,body还可以横向拖拽,
     解决方案,给内容区外边再包一层wrap,把overflow:hidden加到wrap上
标签:
z
给个赞 1 人点赞
收藏 5 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
mnblue mnblue 作者

作者最新