html - 我希望我的网页仅在台式机和平板电脑上缩小，而不是在移动设备上缩小

Question

所以我的网站在显示分辨率为 1920x1080 或更高的台式机上看起来很棒。这是一个电子商务网站，所以我在产品页面上有很多元素。

问题是当在分辨率为 1366X768 或更低的台式机或平板电脑上查看时，很多这些元素不会显示，因此用户必须向下滚动页面才能查看这些元素。我担心有些用户可能甚至没有注意到这些元素，我可能会失去客户。

所以，我想为什么不将网页缩小到 75% 左右，这样所有元素都可以在不滚动的情况下适应，并且几乎没有谷歌搜索我找到了这段 CSS 代码。

@media screen and (max-width: 1366px) and (max-height: 768px) {
   html {
      zoom: 0.75
   }
}

现在它在台式机和平板电脑上运行良好，我喜欢我的网页缩小到 75%，所有必要的元素都显示在用户面前的屏幕上，而不需要他们向下滚动网页。

但是当我在移动设备上打开我的网页时，我发现它存在一个很大的问题。这些也被缩小到原始尺寸的 75%。我不希望他们在移动设备上缩小规模。我需要它们原样。有什么想法可以实现吗？

Answer 1

你可以这样做。它适用于 ipad 到笔记本电脑屏幕。它以浏览器屏幕为目标。

@media screen and (min-width: 768px) and (max-width: 1366px) {
  html {
  zoom: 0.75
 }
}

或者您可以使用此代码。 max-device-width 是设备整个渲染区域的宽度。和高度一样

@media screen and (max-device-width: 1366px) and (max-device-height: 768px) 
{
  html {
    zoom: 0.75
  }
}