--- theme: smartblue highlight: vs2015 --- **小知识，大挑战！本文正在参与“[程序员必备小知识](https://juejin.cn/post/7008476801634680869 "https://juejin.cn/post/7008476801634680869")”创作活动。** **本文同时参与** **[「掘力星计划」](https://juejin.cn/post/7012210233804079141 "https://juejin.cn/post/7012210233804079141")** **，赢取创作大礼包，挑战创作激励金** ## 1px适配方案某些时候，设计人员希望 `1px`在手机显示的就是`1px`，这也是....闲的，但是我们也要满足他们的需求，这时候我们可以利用缩放来达到目的 ```css .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)` 垂直方向缩放，后面的数字是倍数 ## 图片模糊问题 ```css .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](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b32d6862f6a04b13874bb6c569c6c4e2~tplv-k3u1fbpfcp-watermark.image?) 移动端的网站，我们是经常会有一些弹出框出现的，这样的弹出框，在上面滑动，会导致我们后面的整个页面发生移动，这个问题怎么解决呢？？ ``` 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`下的一些设置和安卓下的一些设置 **添加到主屏幕后的标题** ```html ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06ed7b72ddef4968822e428737754fc1~tplv-k3u1fbpfcp-watermark.image?) **添加到主屏后的APP图标** ``` ``` - 一般我们只需要提供一个`114*114`的图标即可 **启用`webApp`全屏模式** ```html ``` - apple-mobile-web-app-capable 删除默认的苹果工具栏和菜单栏，默认为no - apple-touch-fullscreen 全屏显示 **移动端手机号码识别** ```html ``` - `safari`会对一些可能是手机号码的数字，进行识别，我们可以利用上面的方式，禁止识别 **手动开启拨打电话功能** ```html 13300000000 ``` - 在手机上点击这个链接，可以直接拨打电话 **手动开启短信功能** ```html 13300000000 ``` - 在手机上点击这个链接，可以跳转去短信页面，给该手机号发送消息 **移动端邮箱识别** ```html ``` **手动开启邮箱发送功能** ```html 发送邮件 ``` - 调用邮箱发送功能 **优先启用最新版本IE和chrome** ```html ``` ## 移动端默认样式 - 移动端默认字体 0. 数字和英文字体可使用`Helvetica`字体，IOS 和 Android都有这个字体 0. 手机系统都有自己默认的字体，直接使用默认的 ```css body{ font-family:Helvetica； } ``` - 字体大小如果只是适配手机，可以使用px - IOS系统中，链接、按钮等点击会有灰色遮罩 ```css a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)} ``` - 去除圆角 ```css button,input{ -webkit-appearance:none; border-radius: 0; } ``` - 禁止文本缩放 ```css html{ -webkit-text-size-adjust: 100%; } ``` > 点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。 ![11.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/460324a0187143b5b4c485a39c92cec8~tplv-k3u1fbpfcp-watermark.image) ## 往期精彩推荐 [前端常用的几种加密方法](https://juejin.cn/post/7011306453373812744) [canvas 爬坑路【方法篇】](https://juejin.cn/post/7002024507686780935) [不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化](https://juejin.cn/post/7000913022348689422) [canvas 爬坑路【属性篇】](https://juejin.cn/post/7000553887392333855) [【实战篇】微信小程序开发指南和优化实践](https://juejin.cn/post/6999812394276896804) [聊一聊移动端适配](https://juejin.cn/post/6999438892441026591) [前端性能优化实战](https://juejin.cn/post/6996927481563316260) [聊聊让人头疼的正则表达式](https://juejin.cn/post/6993898348168085534) [获取文件blob流地址实现下载功能](https://juejin.cn/post/6994707174819627039) [Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM](https://juejin.cn/post/6997579802215448606) **Git 相关推荐** [通俗易懂的 Git 入门](https://juejin.cn/post/6997208131558178847) [git 实现自动推送](https://juejin.cn/post/6995362358130376740) **面试相关推荐** [前端万字面经——基础篇](https://juejin.cn/post/6992767550543265829) [前端万字面积——进阶篇](https://juejin.cn/post/6993141036600000548) 更多精彩详见：[个人主页](https://juejin.cn/user/870468941775719/posts)