移動端樣式之踩坑及解決方案

時間 2019-11-30

標籤移動樣式解決方案欄目無線简体版

原文原文鏈接

最近作了個Hybrid的項目，對於 H5 的佈局什麼的就很少說了，這裏總結下遇到的問題：css

Retina 屏幕不夠清晰，不一樣手機顯示不一致.

關於什麼是 Retina 屏幕，究竟會有什麼影響？請移步我這篇文章：html

juejin.im/post/5bfa9e…vue

開發還要根據設計搞進行計算像素十分不方便。ios

具體也可參考我這篇文章。在vue中的postcss相關web

移動端 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

解決方法也有不少種。這裏我是這樣解決：post

<body ontouchstart="">
....
</body>
複製代碼

增長 ontouchstart 事件字體

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。