标签: media-queries

我已经阅读了几乎所有与此问题相关的stackoverflow问题,但没有任何方法可以正常工作.

有人要求我通过媒体查询只检测iPad设备(或最好是〜1024x768 移动设备).我试着用

@media screen
       and (min-device-width: 768px)
       and (max-device-width: 1024px) {
   ...
}

但是当分辨率设置为1024x768(但不是firefox)时,这个媒体查询还会在笔记本电脑和桌面Win32/MacOS上与Chrome(和我猜测)相匹配.我试过这个媒体查询定义orientation:portrait, orientation:landscape但没有运气.它也在桌面webkit浏览器上得到认可.

你可以尝试这个小提琴来测试这个问题.

在搜索之后,我来到这篇有趣的文章中

我认为Safari(以及我测试过的其他WebKit浏览器)并没有遵循规范,而Firefox和Opera则是如此.

"宽度"媒体功能描述了输出设备的目标显示区域的宽度.对于连续媒体,这是视口的宽度(如CSS2,第9.1.1节[CSS21]所述),包括渲染滚动条的大小(如果有的话).

所以我用1009px (1024-15)尝试了这个(小提琴max-device-width)

@media screen and (min-device-width: 768px) 
              and (max-device-width: 1009px) {
   ...
}

并且不起作用,
但如果我使用此媒体查询也定义方向(小提琴)

@media screen and (device-width:768px) and (orientation:portrait),
       screen and (device-width:1009px) and (orientation:landscape) {
    ...
}

令人惊讶的是(对我来说)它似乎正常工作,它似乎只匹配safari/iPad.

问:这个媒体查询对我的需求是否足够可靠？它总是适用于iPad/iPad2吗？或者我不得不期待一些边缘情况和与其他设备分辨率的意外匹配？在这种情况下,您可以建议更有效和可靠的媒体查询吗？

谢谢:)(对于冗长而感到遗憾)

我需要更改页面上的样式,具体取决于它是手持设备(如手机)还是大屏幕设备,如笔记本电脑,固定电脑或平板电脑.

我知道我可以通过css max-width查询来检测分辨率等等,但这并不令人信服.主要是因为今天的智能手机拥有如此高分辨率的屏幕.IE索尼Xperia S,它有一个720p到1280的屏幕,但它只有4.3英寸.因此,在普通电脑屏幕上可读的10px字体将变得太小而无法阅读.

因此,我需要知道的不仅仅是分辨率,而是知道它是否是小屏幕设备.(我假设媒体="掌上电脑"的CSS风格是要走的路.如果我错了请纠正我).

那么:css媒体类型"掌上电脑"关心的参数是什么？

• 设备屏幕尺寸？
• 浏览器窗口大小？
• 带宽？
• 信息是设备是"手持"还是不是客户端传递的参数？
• 平板电脑是否包含在"手持"设备中？

等等

谢谢!

我正在开发一个支持移动设备的新网站,我想尝试使用"响应式设计"/"自适应设计"/ CSS媒体查询.我想知道最近是否有关于支持媒体查询的移动浏览器的报道.如果不是,那么什么是合理的近似值？

我有一些列表项设置为min-height: 12em- 桌面

在为平板电脑/手机屏幕调整大小时,我想将其重置为: min-height: auto

然而,iPad/iPhone忽略了这一点并保持了12em

我也定了 height: auto

我有一个面板,我试图在窗口宽时始终显示面板.我根本不需要关闭按钮 - 只需要为更宽的窗口显示它.

jQuery Mobile Responsive Panel Dismiss问题与其他人一起帮助,但没有运气.我可以把一切都搞定,但每次我导航到一个新页面时,面板都会动画,这看起来很奇怪.

我现在正在考虑在左边使用一个不是jquerymobile面板的固定div.我可以从服务器上做到这一点.但是让小组保持开放似乎需要付出很多努力.

任何提示？

我们目前正在为移动设备构建一个网站.支持的操作系统和浏览器应该是:

• Android 4.x(股票浏览器,谷歌浏览器)
• iOS6 +(Safari,谷歌浏览器)

为了支持高分辨率显示,我们评估了各种技术和库,以便用高分辨率吊坠自动替换图像:

尝试1:retina.js http://retinajs.com/

第一次尝试使用这样的普通<img>标签:<img src="foo.png">并使用retina.js让它自动用视网膜图像的名称(foo@2x.png)替换src属性.这有效但有两个缺点:首先,它会产生不必要的开销,因为原始和视网膜图像都会加载,其次,如果没有可用的视网膜图像,它将导致服务器日志上出现大量404错误我们不想要.

尝试2:picturefill.js https://github.com/scottjehl/picturefill

这个框架使用一些基于<span>元素的奇怪的html标记.对我来说,好像作者试图模仿所提议的<picture>元素而不是标准(尚未),请参阅http://picture.responsiveimages.org - 由于奇怪的标记,我不喜欢这种方法.对我来说,用语法描述带有跨度的图像是没有意义的.

尝试3:通过CSS属性background-image替换图像

我看到有时人们使用CSS媒体查询来检测视网膜显示,然后在具有更高或更低解决方案图片的div(或类似元素)上设置背景图像.我个人不喜欢这种方法,因为它完全不鼓励创建语义上好的标记<img src="foo.png">.我无法想象用div创建一个网站,然后将所有图像设置为背景图像 - 这感觉非常奇怪.

尝试4:通过CSS属性内容设置图像:url(...)

正如这里提出的那样可以在CSS中设置img标签的src属性的等价物吗？似乎可以使用属性通过CSS覆盖img标签中的src属性content:url().现在,这是计划:我们为每个图像设置了img标签,在其src属性中引用了一个透明的空白1x1 png,如下所示:<img id="img56456" src="transp_1x1.png" alt="img description">.现在这在语义上是正确的,并且对W3C验证器也有效.然后我们加载一个CSS样式表,通过Media Queries设置网站上的所有图像.

例:

#img56456{content:url(foo.png)}
@media (-webkit-min-device-pixel-ratio: 2){ 
    #img56456{content:url(foo@2x.png)}
}

现在,这种方法效果很好:

• 没有开销
• 坚实的标记
• 适用于所需的设备/浏览器
• 这里不要求SEO图像

现在,这种方法会导致我们没有想到的任何副作用吗？我只是问,因为我知道它有效,但有点"感觉"奇怪的是通过CSS设置所有图像我也发现这个方法对SO的评论是否有可能在CSS中设置img标签的src属性的等价物？:

"值得补充的是,即使在支持将内容分配给img的浏览器中,它也会改变其行为.图像开始忽略大小属性,而在Chrome/Safari中,它会丢失上下文菜单选项,如"保存图像".这是因为分配了内容有效地将img从空的替换元素转换为类似 <span><img></span>"

这可能是个问题吗？(我没有注意到任何尺寸问题,并且上下文菜单不是必需的)

UC和Opera min浏览器的响应式网站无法正常工作(我们使用媒体查询进行响应式设计).我搜索它周围发现了一些链接:

移动设备中的css响应式设计无效

响应式网站设计不适用于手机

但没有成功.任何帮助将不胜感激....谢谢

UPDATE

我们正在google nexus-5上查看.

网站在谷歌浏览器上正常工作但在UC和Opera迷你浏览器上没有.

我们在html中使用了以下元标记

网站现场请检查您的移动设备(浏览器:UC和Opera mini)

https://www.urbanbinge.com/#!/

从bootstrap,我hidden-print打算在打印时隐藏某些东西.我想写一个自动化测试来验证这一点.我不知道如何强制浏览器以便@media print触发媒体查询.

目前我们正在使用量角器进行此类测试,但如果任何人都可以使用其他工具提供任何解决方案,那将是一个很好的起点.

我是第一次使用CSS网格构建网站。由于并非所有浏览器都支持此功能，因此我设置了一组后备样式，并有条件地使用@supports not (display:grid)。但我也想将其用作移动样式表，并且仅在较大的屏幕上使用CSS网格-这可以通过简单的媒体查询来实现@media screen and (max-width:700px)。现在的问题是-如果其中任何一个都成立，也就是说，如果浏览器不支持CSS网格或者浏览器窗口的宽度不超过700像素，我想使用我的后备样式表。

所以我的问题是-我怎么问的浏览器@supports或@media在同一时间？嵌套它们是行不通的，因为这本质上是在要求它们都为真，并且仅将整个样式表复制粘贴@supports到中，这是错误的@media。

基本上，我想要这样的东西：

(@supports not (display:grid)) or (@media screen and (max-width:700px)){
    /*my stylesheet*/
}

我正在使用使用React的特定文本格式的DIN A4页面创建编辑器。

现在，我的内容是由可编辑的div处理的（在其中嵌套了更多的div用于格式化）。

如果可能，我希望能够将所有内容（包括用户完成的分页符）检索为一个长HTML字符串。我当时正在考虑在状态下拆分页面，但是以某种方式自动呈现可能会更好。

简而言之：我需要我的文本自动分成几页，但可以作为一个长字符串进行编辑。

这样做的最佳方法是什么？

例如，查看https://youmescript.com/。