Question

我正在开发一个响应式设计，我开始使用firefox responsive design view和我的媒体查询，他们都在使用它..但是当我开始在iphone5s上使用safari时，它不起作用。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />在我的头上标签......我错过了一些需要在那里进行safari / iphone 5s的东西吗？提前谢谢！

我试过这些

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

或尝试使用@media screen：

@media screen and (device-aspect-ratio: 40/71) {

}

Answer 1

最好不要专注于iPhone 5的专门设计，因为iPhone 6和6+已经加入了战斗（并且用户也在使用4S设备）。

最好将设备视为非设计并设计为视口宽度。正如@Yoshi所说，正确指定视口将确保所有设备都以预期的像素宽度显示网站。

虽然我会防止禁用缩放（通过指定最大比例）。这会破坏可供性，并使某些用户难以像他们希望的那样与您的网站进行互动。

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

从那里你可以指定基于像素的媒体查询：

.item { width:25%; }
@media screen and (max-width:750px) {
  .item { width:33%; }
}
@media screen and (max-width:450px) {
  .item { width:50%; }
}
@media screen and (max-width:250px) {
  .item { width:100%; }
}

这是一个项目如何适应不同浏览器宽度的一个非常简单的示例。

这种方法对未来也更加友好，因为谁知道这些设备会有多大或多小。祝好运！ =）

Answer 2

在你的情况下，我将尝试一些差异，如

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,    user-scalable=no"

在css中我会尝试这个

@media (max-device-width: 640px) { your style }

Answer 3

据我所知，我认为主要的响应框架会查看设备屏幕宽度。也许尝试使用此处设置的规则：

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://getbootstrap.com/css/#grid-media-queries

http://foundation.zurb.com/docs/v/4.3.2/media-queries.html

我的响应式设计不适用于safari / iPhone 5s

3 个答案: