移动端样式之踩坑及解决方案

最新推荐文章于 2022-08-17 13:53:02 发布

_miccretti

最新推荐文章于 2022-08-17 13:53:02 发布

阅读量305

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：https://juejin.im/post/5c11d37851882509a768447c

版权

最近做了个Hybrid的项目，对于 H5 的布局什么的就不多说了，这里总结下遇到的问题：

Retina 屏幕不够清晰，不同手机显示不一致.

关于什么是 Retina 屏幕，究竟会有什么影响？请移步我这篇文章：

juejin.im/post/5bfa9e…

开发还要根据设计搞进行计算像素十分不方便。

具体也可参考我这篇文章。在vue中的postcss相关

移动端 1px 问题

这里遇到一些问题就是1px的问题，在 Retina 屏幕进行适配。解决方案很多种。我这里是利用媒介查询，我觉这种方法比较简单和容易控制，所以我这里是这样解决的：

CSS
.border {
  border-bottom: 1px solid #D9D9D9;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border {
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .border {
    -webkit-transform: scaleY(0.33);
    -webkit-transform-origin:0 0;
    overflow: hidden;
  }
}
复制代码

ios用户，如果用户昵称是手机号码，就会在页面中显示蓝色字体，并且可以拨打。

<meta name = "format-detection" content = "telephone=no">
复制代码

ios 用户，点击后，伪类的 :hover 不生效。安卓ok

解决方法也有很多种。这里我是这样解决：

<body ontouchstart="">
....
</body>
复制代码

增加 ontouchstart 事件

_miccretti

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端样式之踩坑及解决方案

最近做了个Hybrid的项目，对于 H5 的布局什么的就不多说了，这里总结下遇到的问题：Retina 屏幕不够清晰，不同手机显示不一致.关于什么是 Retina 屏幕，究竟会有什么影响？请移步我这篇文章：juejin.im/post/5bfa9e…开发还要根据设计搞进行计算像素十分不方便。具体也可参考我这篇文章。在vue中的postcss相关移动端 1px 问题这里遇到一些问题就是...
复制链接

扫一扫