标签: media-queries

我正在尝试调整我的平板电脑网络应用程序,以便在手机上使用.媒体查询功能似乎很完美,我的初步测试证实了这一点.我的问题是:手机和平板电脑将其方向从纵向更改为横向(在设备旋转时),最大宽度是指什么？

换句话说,较大的Android手机的分辨率为480x800,iPhone4的分辨率为640x960,原装Blackberry Torch的分辨率为360x480.这些是设备以纵向模式保持时的所有分辨率(W x H),因此宽度分别为400,640和360.但是,当您将设备旋转为横向时,高度"变为"宽度以用于显示目的.因此,横向的有效宽度分别变为800,960和480,800和960宽度与平板电脑横向宽度重叠,这会使显示器变得混乱.

那么,宽度总是宽度？也就是说,当设备报告其尺寸时,宽度值对于CSS目的是否总是保持不变,或者当设备旋转到横向时宽度值是否会改变？

谢谢大家提前.

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

我需要一种快速而肮脏的方法来使用jquery检测媒体查询支持.我定义了一个函数如下:

function mediaQueriesEnabled () {
   var v = parseFloat($.browser.version);
   if ($.browser.msie) {
      if (v < 9)
         return (false);
   }
   return (true);
}

有人可以帮我解决这个问题吗？看这个页面:

http://caniuse.com/css-mediaqueries

我意识到这里有一些复杂性.例如,当我测试我的safari版本时,我得到"534.57.2".我现在想避免安装modernizr,主要是因为我处于紧张状态,我需要在短期内处理大多数情况.任何帮助表示赞赏!

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

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

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

我也定了 height: auto

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

• 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触发媒体查询.

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

我有以下HTML页面:

<style>
  @media not(max-width: 512px) { * { color: red; } }
</style>

Foobar

但是,这对窗口没有反应width.永远不会应用媒体规则.如果我删除它not,它按预期工作.我怎么不明白not(max-width)？

是的,我知道还有其他方法可以完成同样的事情,并且not(max-width: 512px)与之相同min-width: 513px.但是,对于我正在构建的系统,我需要能够指定not(max-width).

我正在使用ZURB Foundation，我想知道是否存在一种在小型设备上对齐菜单项的简便方法。

目前，我的HTML如下所示：

<ul class="vertical menu align-right">
    <li><a title="My God, It's Full of Stars">Link 1</a></li>
    <li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

如您所见，在所有设备上，我的菜单都对齐“右”，但在较小的设备上，我想将这些项目居中放置，我知道ZURB 6有许多类和数据方法，可根据视点大小来使事物工作不同。

我试过同时使用：

1. <ul class="vertical menu align-right" data-responsive-menu="small-align-center">
2. <ul class="vertical menu align-right small-align-center">

两者都不起作用！可悲的是。

我想我可以使用：

/* Small only */
@media screen and (max-width: 39.9375em) {

    .menu.align-right {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .menu.align-right.vertical li {
        text-align: center;
    }

}

我希望将CSS保持最小，并想知道是否存在一种不添加CSS的方法。尽管文档在ZURB 6站点上一样好，但并未列出所有内容。

问题：

在小型，中型和大型设备上，是否有使用CLASS或DATA对齐菜单项的方法？

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

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

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

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

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

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