gpt4 book ai didi

css - 方向媒体查询不适用于 iPad mini

转载 作者:行者123 更新时间:2023-12-01 08:03:16 25 4
gpt4 key购买 nike

这个小的 HTML 代码非常清楚地代表了我的 HTML5 页面。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pebble Go</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
</head>
<body>
<style>
@media only screen and (orientation: portrait) {
html, body {
background: #222;
}
}
@media only screen and (orientation: landscape) {
html, body {
background: #000;
}
}
</style>
</body>
</html>

因此,在桌面浏览器、Android 平板电脑和手机上 - 它运行良好。但在 iPad mini 上 - 它不是! ……结果是——背景总是灰色的。所以我的问题是:

为什么这个媒体查询在 iPad mini 上不起作用……??? ……

PS:我知道我也必须使用 max-device-width 属性,但我有很大的理由不这样做! ……

这个页面的要求是100%的宽和高,我决定:

  1. 为横向模式制定默认的 CSS 规则;
  2. 在横向模式下定义不同宽度的规则;
  3. 定义纵向变体,基本上依赖于“方向:纵向”,并定义不同的宽度。

我做到了!它的工作! ……除了 iPad mini! ......如果我使用最大设备宽度或类似的东西 - 那么我将不得不为横向编写不同的规则 - 不同的宽度,纵向模式 - 不同的宽度,然后是移动设备 - 横向和肖像......! ……

最佳答案

问题似乎是由视口(viewport)元标记中的子句引起的,更具体地说:“height=device-height”。删除它使一切正常:) ...

关于css - 方向媒体查询不适用于 iPad mini,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20199764/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com