iPhone 5的屏幕更长,无法捕捉到我网站的移动视图.iPhone 5最新的响应式设计查询是什么?我可以结合现有的iPhone查询吗?

我目前的媒体查询是这样的:

@media only screen and (max-device-width: 480px) {}

推荐答案

另一个有用的媒体功能是device-aspect-ratio.

注意iPhone 5 does not have a 16:9 aspect ratio.事实上是40:71.

iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

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

iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Reference:
Media Queries @ W3C
iPhone Model Comparison
Aspect Ratio Calculator

Css相关问答推荐

JavaFX如何在Tableview中使用默认和自定义的列标题CSS样式?

添加Angular 17的Stackblitz项目的Angular material 主题?

我的css是我的react 应用程序没有按预期工作

如何使用遮罩创建手绘SVG动画

如何将动态参数从react tsx文件发送到css

如何仅在CSS中屏蔽具有多个形状的div框?

创建一个CSS动画的对角线线条.

是否有一个 CSS 可以根据字符的高度 for each 字符呈现可变高度?

我怎样才能让我所有的网格列的高度等于最短列的高度

在 SVG 元素上方添加标签而不移动 SVG 元素

不能在带有 SCSS 的过滤器灰度内使用 CSS 变量

位置绝对混乱的 CSS Flexbox

使用css水平+垂直翻转/镜像图像

CSS类和id同名

如何在 CSS 中绘制一个圆形扇区?

如何使用 JavaScript 获取元素的背景图片 URL?

内联块列表项中不需要的边距

当子元素水平溢出时,为什么忽略父元素的右填充?

如何更改 HTML 输入标签的字体和字体大小?

HTML5 和边框