这一定已经被回答过了,但我找不到相关的问题.

我设计了一个响应式网站,css媒体查询一直下降到正确显示在320宽.

想要的是iPhone4(640 x 960),当在纵向模式(640宽),以遵守媒体查询,就像它的显示宽度= 320像素.理由：即使iPhone具有更多的像素,我也想为这些用户显示一个简化的布局,类似于非高密度手机的用户.

通过为这些高像素密度手机指定一些元标签,可以做到这一点吗？

当然,我可以使用min-device-pixel-ratio：2为iphone 4等定义单独的媒体查询,但这会导致单独的css媒体查询(一个用于低像素密度,一个用于高像素密度),它们基本上具有相同的逻辑,似乎不是很干涩的(http://en.wikipedia.org/wiki/Don%27t_repeat_yourself)

奇怪的是：新的Ipad 3,具有像素密度2,DOES正确渲染我想要的方式,即：它模拟(至少像css媒体查询)一个具有一半分辨率的设备.

iPhone 4(和4S)将回应此元标记：

<Meta name="viewport" content="width=device-width,initial-scale=1.0">

这是你的“初始化”部分.它将使高分辨率设备的行为像320像素宽(或480景观).

有other bugs around landscape orientation你应该注意.

另外,请记住有一个orientation parameter available的媒体查询：

@media screen and (orientation:landscape) {
/* Landscape styles */
}

我最近开始用反应灵敏的网页设计,并在这里做了一个基本的测试：

http://test.studev.net/

它在桌面浏览器中工作正常,但是当加载到高分辨率设备上时,如何处理最小宽度设计,例如iPhones上的视网膜显示器,我感到有些困惑.因为这种类型的显示器,这意味着例如尺寸为16px的,在桌面上正常阅读是不可能在iPhone 4/5上阅读的.

这通常如何处理？

如果你想要使移动或更大的文字更小的文字,你可以做

@media screen and (max-width: 480px) {
    font-size: 10px; /* Smaller */
}

要么

@media screen and (max-width: 480px) {
    font-size: 20px; /*Larger*/
}

并确保你在你的&HEAD>标签：

<Meta name="viewport" content="width=device-width,initial-scale=1">

或者您也可以禁用缩放：

<Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

而对于IE10的支持,请尝试：

@-ms-viewport{
    width:device-width
}

我试图创建一个移动友好的版本的我的网站，使我的网站响应更小的屏幕尺寸，并相应地缩放。

我创建了一些媒体查询，在桌面上调整大小时在浏览器中正确运行。

在我的iPhone上，safari只收缩整个网站，但仍然保持全尺寸网站的长宽比。如何获取媒体查询？我错过了什么？

这里是一个链接到一个沙箱，我试图得到正确工作 – 任何帮助或建议是赞赏：

http://www.preview.brencecoghill.com/

你在你的html中有视图端口的元吗？

<Meta name="viewport" content="width=device-width,initial-scale=1.0">

更多信息：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

移动屏幕尺寸有很多不同的媒体查询。在设计响应式移动网站时，可能会压倒所有人。在设计移动设备时，最重要的是哪些？我发现这篇文章做了一个很好的工作概述可用的媒体查询： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

我建议采取后 Twitter’s Bootstrap与这四个媒体查询：

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

编辑：这个问题的原始答案是从Bootstrap版本2。Bootstrap以来更改了他们的媒体查询在版本3.注意，没有明确查询小于768px的设备。这种做法有时被称为移动优先。任何媒体查询以外的任何内容都会应用于所有设备。媒体查询块中的所有内容都会扩展并覆盖全局可用的内容以及所有较小设备的样式。认为它是响应式设计的渐进增强。

/* Extra small devices (phones,less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets,768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops,992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops,1200px and up) */
@media (min-width: 1200px) { ... }

在Bootstrap 3’s docs检查。

我正在使用css中的媒体查询来区分 iphone和ipad

这是我的代码：

/* iphone 3 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) { ... }

/* iphone 4 */
@media only screen and (min-device-width : 640px) and (max-device-width : 960px) and (orientation:portrait) { ... }

/*iPad styles*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { ... }

/* i have the same for landscape */

现在我有一个解决冲突,iphone 4使用与ipad相同的分辨率,反之亦然.

如何解决这个问题？

修改您的iPhone 4媒体查询以定位高密度像素显示(retina = iPhone4)

@media screen and (max-device-width: 640px),screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) { ... }

没有注意到您通过扩展重新打开了这个问题,所以这里是一个重做的答案,目标是iphones(3和4)和ipads.

你应该期待的细分：

>在常规浏览器上,您应该得到蓝绿色背景颜色.
>在ipad(景观)上的橙色.
>黑色的ipad(肖像)
>红色在iphone 4(肖像)
>粉红色的iphone 4(景观)
常规智能手机上的绿色,例如Android(景观)
>常规智能手机上的紫色(肖像)

CSS

body {
    background-color:teal;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    body {
        background-color:yellow;
    }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    body {
        background-color:orange;
    }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    body {
        background-color:black;
    }
}

/* iPhone 4 - (portrait) ---------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait){
    body {
        background-color:red;
    }
}

/* iPhone 4 - (landscape) ---------- */
@media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape),screen and (min-device-pixel-ratio : 2) and (orientation:landscape){
    body {
        background-color:pink;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width: 480px) {
    body {
        background-color:green;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
    body {
        background-color:purple;
    }
}`<!-- language-all: lang-css -->

我重新格式化了这个精美的article中找到的@media查询,通过CSS技巧来符合一些iphone4特定的位,但是这个媒体查询集合总体上应该涵盖两个iphone(3和4个独立的媒体查询)和ipads.

这是您可以在i设备中尝试的演示.

http://jsfiddle.net/andresilich/SpbC3/4/show/

您也可以在http://quirktools.com/screenfly/尝试查询,看看它们是如何堆叠的.有一件事,screenfly网站没有区分iphone 3和4,因为普通浏览器只跳过webkit -webkit-min-device-pixel-ratio：1.5像素比例数,所以你会得到更好的结果测试在你的实际设备.