问题描述
所以我有一个网络应用程序，看起来完美的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像素比率的牺牲品：。每个设备都有一个应用于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.
@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导致布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！