为什么我的移动设备仍将视口视为桌面?
我正在引导中制作桌面网站的快速移动版本，并遇到了一些格式问题.当我在桌面上展开此视图时，我的图标以3 x 4网格显示就好了.当我缩小窗口的宽度时，图像网格将相应地起作用，并缩小到1列，每行所有12张图像，而没有水平边栏. 但是，当我在移动设备上查看时，我的导航栏不会“捕捉"到每个语音的可见分辨率的宽度，并且允许我侧向滚动-即使图像仍按12列的1列对齐图片.尽管站点清楚地检测到在移动设备上进行
..
media-queries相关内容
Chrome与媒体查询有关的错误
我在chrome浏览器中遇到了一个奇怪的问题 我向页面中的某些元素添加了过渡，并创建了3种状态的媒体查询 当我调整浏览器的大小并更改媒体查询的状态时，我的元素使用动画来更改大小，这是不错的选择，但是当我尝试将浏览器的大小恰好保持在媒体查询的边缘或与之非常接近时，元素怪异和晃动，有时在放开调整大小时像放慢速度一样会降低我的页面速度，主要问题是当我以该大小刷新时，页面会出现该错误 我
..
CSS最大宽度的像素精度不准确
我对 max-width 媒体规则有疑问.我测试将元素隐藏在不同的 max-width 值上，并且行为不一致.我已经测试了4种不同屏幕宽度的场景. 场景1 :屏幕宽度为638px:这符合我的期望. 方案2 :屏幕宽度为639px:这是错误的！我希望 column639 仍然被隐藏！ 方案3 :屏幕宽度为640px:这符合我的期望. 场景4 :屏幕宽度为641px:这符合我的期望.
..
使用媒体查询的视网膜显示图像分辨率
使用媒体查询来检测视网膜显示并指定最大宽度的最佳方法是什么?我可以使用 来检测视网膜 @media仅屏幕和(-webkit-min-device-pixel-ratio:2)，仅屏幕和(最小-moz-device-pixel-ratio:2)，仅屏幕和(-o-min-device-pixel-ratio:2/1)，仅屏幕和(min-device-pixel-ratio:2)，仅屏幕和(最小分
..
如何使用CSS媒体查询在移动设备上仅定位Google Chrome
我正在创建一个个人网站，并且正在使用CSS网格显示固定高度为100vh的页面的每个部分.一切正常，直到我在移动设备上测试google chrome.我了解google chrome包含100vh的导航栏，因此我以100vh进行计算.它可以工作，但也适用于所有浏览器，移动设备和PC.我希望它仅适用于移动设备上的Google Chrome. 我已经尝试了以下方法来针对移动设备上的google c
..
CSS媒体查询和图像大小
我目前正在WordPress博客中实现CSS Media Queries，我想知道是否有任何已知方法可以如何调整宽度为400-600px的博客图像大小以适合iTouch的屏幕分辨率，iPhone和其他具有小屏幕的智能手机. 我的想法是添加此CSS: .blogpost img {宽度:55％;高度:55％} ，以便它将自动调整我博客中所有图像的大小.我需要这件事的帮助.我不满意我的方
..
如何使用媒体查询对HTML重新排序?
我想通过媒体查询[按查看的文档顺序]更改 div 元素的位置.
1
2 更改视口后，我想 div_1 留在 div_2 下.基本上是 div_1 在顶部.但是我想通过媒体查询来更改它.有可能吗? 解决方案 使用 flexbox 及其 order 属性 我建议使用 .wrapper ，尽管您也可以在 body 上使用它并获得
..
媒体查询有关屏幕尺寸而不是分辨率
是否有解决方法在CSS媒体查询中使用物理屏幕宽度?今天，有些电话已经超过了台式机显示器的分辨率.但是，电话仍应显示移动版式，而台式机应显示标准版式. 因此，我不能像下面的示例那样依赖基于像素的查询.相反，我需要物理测量或像素密度测量. @media屏幕和(最小宽度:700像素){} 由于我尚未通过研究发现此类测量，因此它们可能不存在.无论如何，通常如何解决这个问题? 解决方案
..
如何在Chrome中模拟“偏好颜色方案"媒体查询?
Chrome 76增加了对 prefers-color-scheme 媒体查询(也称为“暗模式")的支持. 但是我如何轻松地在两种配色方案下测试我的网页，而又不切换系统暗模式的开启和关闭? 这是针对Firefox的相同的问题，但是我可以在Chrome&中找不到相似的设置Chrome DevTools. 解决方案 自Chrome版本79起，您可以在 prefers-color-s
..
根据屏幕尺寸更改布局
我希望我的网站标题的内容在常规尺寸的台式机/笔记本电脑上占据屏幕宽度的100％，但要以较大的显示器为中心.我所说的“更大的显示器"也是指显示器的实际尺寸，而不仅仅是分辨率.我希望在15英寸笔记本电脑和23英寸台式机(均具有1920x1080的相同分辨率)上，显示器有所不同.在23英寸的显示屏上显示如此宽的菜单效果不佳，因为那里有宽阔的空白部分. 我当前正在使用 .container Bo
..
媒体查询问题
因此，我正在使用引导程序来建立我的个人网站.目前，我正在尝试使内容适合移动设备的大小. 我的问题是我不太记得如何使用查询以及我的操作方式在某一时刻停止工作. 所以基本上我正在做的是将移动CSS样式放入主CSS中，然后随着屏幕变大对其进行更改. 但是由于某些原因，查询在 992px 之后停止工作. 是否有更好的方法可以使工作更有意义. 解决方案 以下是您应如何使用媒体
..
视网膜显示屏和1080p手机等高DPI设备如何处理媒体查询中的像素?
例如，带有Retina显示屏的iPhone在媒体查询中显示多少个像素?是320像素还是640像素?如果是640像素，网站如何处理不同的设备分辨率?不管屏幕的分辨率如何，有没有办法使用相同的单位? 解决方案 诸如iPhone和iPad的视网膜设备通常使用2个设备像素= 1个CSS像素.像这样的媒体查询: @media all和(最大宽度:320像素){} 实际上，即使它的宽度为640
..
& quot;显示完整网站& quot;按钮绕过CSS媒体查询
我在网站上使用CSS媒体查询来切换到较小设备上的垂直布局.效果很好，但我想在网站上添加一个类似“显示桌面版本"的按钮.我想使此按钮(或链接，无论如何)强制或更改媒体查询评估，以便它们评估时好像屏幕宽度大于实际宽度(例如1200像素而不是320像素).这可能吗? 我的CSS看起来像这样: #logo {/*移动样式*/[...]@media(最小宽度:@ screen-sm){/*桌面样式
..
Chrome打印预览不会加载@media only打印字体
我希望打印的字体与屏幕的字体不同.不幸的是，Google Chrome打印预览(可在其他浏览器上运行)不会加载字体，也不会显示文本.但是，如果您第二次尝试，则会加载字体，然后Google Chrome打印预览将显示文本！ 在这里您可以重现问题.(注:小提琴上的字体网址不存在，但至少预览应将文本显示为"serif".) 有没有比对所有@media强制预加载打印字体更好的解决方案?
..
使用JavaScript检测动态媒体查询，而无需在脚本中硬编码断点宽度?
我一直在寻找一种轻量级，灵活，跨浏览器的解决方案，以访问JavaScript中的CSS媒体查询， 而在JavaScript代码中不重复CSS断点 CSS技巧发布了 CSS3基于动画的解决方案，似乎很不错，但是建议使用 Enquire.js . Enquire.js似乎仍然需要在脚本中对Media Query大小进行硬编码，例如 enquire.register("screen an
..
如何为Safari Web浏览器设置媒体查询
@media only屏幕以及(最小宽度:480像素)和(最大宽度:767像素){} 这是我的媒体查询，如何解决它.如何为野生动物园网络浏览器设置. 解决方案 不是针对浏览器检测进行媒体查询的.改用javascript，例如: if(navigator.userAgent.search("Safari")> == 0&& navigator.userAgent.search("C
..
如何在浏览器中更改“偏好降低运动"设置?
关于如何使用在CSS中偏好降低运动的媒体查询. 这很棒，但是现在我在CSS中使用了 prefers-reduced-motion ，因此我希望能够测试启用了此设置的用户使用网站的方式.但是，我找不到有关如何执行此操作的任何信息，并且在浏览器设置中很难找到此设置. 也许这根本不是浏览器设置.也许这是在操作系统级别设置的.🤔 解决方案 哦，我没有看到" 对于Firefox，
..
更改< Video>基于屏幕大小和Java的src
我正在测试使用引导程序在我的计算机上本地构建站点. 我有一个 作为网站的标题. 我希望该视频在移动设备上显示完整的宽度和高度，并在台式机上显示该视频的裁剪/宽版.我尝试在 标记中使用内联媒体查询，以使 src 可以更改，但无济于事. 所以我换了档，并使用了一些JavaScript来进行更改. 所以疯狂的是，我的脚本似乎可以正常工作.当我查看
..
React.js的媒体查询语法
如何在Reactjs中执行以下CSS媒体查询? .heading { text-align: right; /* media queries */ @media (max-width: 767px) { text-align: center; } @media (max-width: 400px) { text-align: left; } } 我
..
使用php检测特定的iPhone或iPad型号
我的网站出售iPhone，iPad和iPod的配件，零件和维修，我想根据他们正在浏览的特定iPhone/iPad/iPod型号，为用户可能要寻找的类别提供链接建议.使用PHP. 我知道我可以使用标头来检测它是iPhone，iPad还是iPod，但是由于我有很多类别，因此我希望它更具体一些，并区分iPhone 3G，4和iPhone 5，以及iPad.我是对的，标题没有提供有关特定型号的任何信
..