平板电脑缩放我的网页1.5x导致布局问题 [英] Tablet's scaling my web page by 1.5x causing layout issues

问题描述

所以我有一个网络应用程序，看起来完美的1024×768像素在笔记本电脑上（我真的不在乎手机在这一刻）。然而，当我把同一个应用程序在平板电脑上，它不适合，即使像素的可用性是高于1024x768。原来，平板电脑正在缩放我的应用程序，因此它使用1.5 x css像素乘数，使其在平板电脑上大得多。

So I have a web app that looks perfectly fine at 1024x768 pixels on a laptop (I really don't care about phone at the moment). However, when I take the same app onto a tablet it doesn't fit even though the pixel availability is way higher than 1024x768. It turns out that the tablets are scaling my app so it uses a 1.5 x css pixel multiplier causing it to be much larger on the tablets.

我在我的html head：

I have the following in my html head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但它仍然缩放网页。这段代码在我看来，它会将初始比例设置为1.0，使css像素==硬件像素，但它不。我不是真的在一个地方使用完全响应式设计。我只需要让平板电脑停止扩展我的价值观。

But it still scales the web page. This code seems to me that it would set the initial scale to 1.0 so that css pixels == hardware pixels, but it doesn't. I'm not really in a place to use full responsive design for this. I just need to have tablets stop scaling my values for me. How can I get this fixed?

推荐答案

您成为CSS像素比率的牺牲品： http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density 。每个设备都有一个应用于css的缩放因子。例如，ipad mini是2的比率。

You're falling victim to the CSS pixel ratio: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density of your device. Each device has a scaling factor applied to css. For example, the ipad mini is a ratio of 2.

有很多方法可以在CSS中查询比率，但是根据Mozilla不推荐使用。

There are ways to query the ratio in CSS, but it is not recommended according to Mozilla.

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries#-moz-device-pixel-ratio

 @media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
   (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
   (min-resolution: 2dppx),             /* The standard way */
   (min-resolution: 192dpi)             /* dppx fallback */ 

这篇关于平板电脑缩放我的网页1.5x导致布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！