移动端常见问题汇总

StriveToY
5,225 阅读4分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」  ，赢取创作大礼包，挑战创作激励金

1px适配方案

某些时候，设计人员希望 1px在手机显示的就是1px，这也是....闲的，但是我们也要满足他们的需求，

这时候我们可以利用缩放来达到目的

.border_1px:before{
    content: '';
    position: absolute;
    top: 0;
    height: 1px;
    width: 100%;
    background-color: #000;
    transform-origin: 0% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
    .border_1px:before{
        transform: scaleY(0.5);
    }
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
    .border_1px:before{
        transform: scaleY(0.33);
    }
}
​

设置一个专门的class来处理1px的问题，利用伪类给其添加

  • -webkit-min-device-pixel-ratio 获取像素比
  • transform: scaleY(0.5) 垂直方向缩放，后面的数字是倍数

图片模糊问题

.avatar{
    background-image: url(conardLi_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
    .avatar{
        background-image: url(conardLi_2x.png);
    }
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
    .avatar{
        background-image: url(conardLi_3x.png);
    }
}

根据不一样的像素比，准备不一样的图片，正常来说是1px图片像素 对应1px物理像素，图片的显示就不会模糊啦，但是这样的情况不多，不是非常重要，特殊需求的图，我们不这么做。

滚动穿透问题

wt1.gif

移动端的网站，我们是经常会有一些弹出框出现的，这样的弹出框，在上面滑动，会导致我们后面的整个页面发生移动，这个问题怎么解决呢？？

body{
    position:fixed;
    width:100%;
}

给body添加position:fixed就可以使滚动条失效，这里弹框的显示和隐藏，我们利用JS进行控制，而且添加上position:fixed的一瞬间，可以看到页面一下回到0,0的位置，因为fixed是根据可视区定位的。

键盘唤起

main{
    padding: 2rem 0;
    /* height: 2000px; */
    position: absolute;
    top: 60px;
    bottom: 60px;
    overflow-y: scroll;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

当底部根据页面进行fixed定位的时候，键盘弹出一瞬间，fixed会失效，变成类似absoult，让main的内容无滚动，就不会连带fixed一起动了

并且为了保证如丝般顺滑：

  • -webkit-overflow-scrolling: touch;

移动端的神奇操作

IOS下的一些设置 和 安卓下的一些设置

添加到主屏幕后的标题

<meta name="apple-mobile-web-app-title" content="标题">

image.png

添加到主屏后的APP图标

<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
  • 一般我们只需要提供一个114*114的图标即可

启用webApp全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-touch-fullscreen" content="yes" />

  • apple-mobile-web-app-capable

    删除默认的苹果工具栏和菜单栏，默认为no

  • apple-touch-fullscreen

    全屏显示

移动端手机号码识别

<meta name="format-detection" content="telephone=no" />
  • safari会对一些可能是手机号码的数字，进行识别，我们可以利用上面的方式，禁止识别

手动开启拨打电话功能

<a href="tel:13300000000">13300000000</a>
  • 在手机上点击这个链接，可以直接拨打电话

手动开启短信功能

<a href="sms:13300000000">13300000000</a>
  • 在手机上点击这个链接，可以跳转去短信页面，给该手机号发送消息

移动端邮箱识别

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

手动开启邮箱发送功能

<a href="mailto:854121000@qq.com">发送邮件</a>
  • 调用邮箱发送功能

优先启用最新版本IE和chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

移动端默认样式

  • 移动端默认字体

    1. 数字 和 英文字体 可使用Helvetica字体，IOS 和 Android都有这个字体
    2. 手机系统都有自己默认的字体，直接使用默认的
    body{
    font-family:Helvetica；
}

  • 字体大小

    如果只是适配手机，可以使用px

  • IOS系统中，链接、按钮等点击会有灰色遮罩

    a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}

  • 去除圆角

    button,input{
    -webkit-appearance:none;
    border-radius: 0;
}

  • 禁止文本缩放

    html{
     -webkit-text-size-adjust: 100%;
}

点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

11.png

往期精彩推荐

前端常用的几种加密方法

canvas 爬坑路【方法篇】

不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化

canvas 爬坑路【属性篇】

【实战篇】微信小程序开发指南和优化实践

聊一聊移动端适配

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见：个人主页

avatar
文章
阅读
粉丝