宽度为1024像素的屏幕和宽度为1024像素的屏幕有冲突 [英] Screens with 1024px width and Tablets of 1024px width are conflicting

问题描述

我使用MediaQuery创建一个响应式网站布局，如下所示，除了一个邪恶的问题，一切正常！

I am using MediaQuery to create a responsive website layout as you will see below, everything works fine apart from one evil problem!

core.css应用于默认情况下是网站，它是桌面版本的样式表。但你可以看到在这个链接，当屏幕宽度为1024px或更低，它将链接到平板电脑和mobile.css，因此它适用于平板电脑和手机风格。 < link rel =stylesheettype =text / cssmedia =screen and（max-width：1024px）href =assets / css / tablet-and-mobile.css/ >

core.css is applied to the site by default and it is the style-sheet for the desktop version. But as you can see in this link, when the screen width is 1024px or below it will link to the tablet-and-mobile.css so it applies the tablet and phone styles. <link rel="stylesheet" type="text/css" media="screen and (max-width : 1024px)" href="assets/css/tablet-and-mobile.css"/>

问题是，许多用户仍然是用户桌面，屏幕宽度为1024像素，平板宽度也为1024像素！两个屏幕具有相同的宽度的事实与整个系统冲突，因为当从具有宽度1024px的屏幕的桌面访问网站时，它应用平板版本。

The problem is that many users still user desktops with a screen that have the width of 1024px and tablets width is also 1024px! The fact the both screens have the same width is conflicting the whole system as when the website is visited from a desktop of a screen with width 1024px it applies the tablet version.

@media screen and (max-device-width: 1024px)

我已经尝试了一切，我可以！但似乎无法解决它。你会推荐什么？这里是一个活动模板：www.loaistudio.com

I have tried everything I could! but can't seem to be able to fix it. What would you recommend? Here is a live template: www.loaistudio.com

推荐答案

您可以尝试以下操作：
@media screen and（max-width：1024px）and（min-resolution：120dpi）
此MQ适用于大多数平板电脑，但不适用于屏幕大于10.5英寸，涵盖了大多数情况。不是一个理想的解决方案，但值得一试。
DPI计算器可能会有帮助。

You may try the following: @media screen and (max-width: 1024px) and (min-resolution: 120dpi) This MQ should work for most tablets, but won't for laptops with screens larger than 10.5 inches, which covers most of the cases. Not an ideal solution, but worth a try. DPI calculator might help.

对于你的案例可能看起来像：< link rel =stylesheetmedia =screen and（max-width：1024px）and（-webkit-min-device- ratio：1.25），（min-resolution：120dpi）href =assets / css / tablet-and-mobile.css/>

For your case might look like: <link rel="stylesheet" media="screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi)" href="assets/css/tablet-and-mobile.css" />

注意：请参阅 - https：// developer .mozilla.org / zh-CN / docs / Web / Guide / CSS / Media_queries＃resolution

NOTE: refer to - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#resolution

这篇关于宽度为1024像素的屏幕和宽度为1024像素的屏幕有冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！