程序员经验分享-hwhale

iPhone 忽略 CSS 媒体查询。存在视口标签。在桌面上工作

2023-11-25

编辑：这对我来说完全是菜鸟错误。我正在编辑与我正在测试的文件集不同的文件集。向所有回答帮助我的人表示诚挚的歉意。我对所有答案都投了赞成票，因为我至少从你们那里学到了更多关于媒体查询的知识，但没有人提供答案。请问现在如何处理这张票？

这是网站上的一个热门话题，但我还没有看到这个问题的解决方案。

The viewport标签存在。我在用着：

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

当我在 Chrome 中调整浏览器窗口大小时，它工作正常，并且我可以看到它在到达新断点时捕捉到新断点，但是 iPhone Safari 仅显示网站的左上角，没有接收任何查询的迹象。

我用于 iPhone 肖像的 CSS 媒体查询是：

@media (max-width: 321px) { }

我正在使用 Bootstrap 和 LESS，所以我的媒体查询位于样式的末尾。

抱歉，我无法分享这方面的代码。这很奇怪——我希望有人能看看我是否遗漏了一些东西。

EDIT

这是一个在我的 iPhone 上运行的非常基本的示例。我可以从纵向旋转到横向，背景颜色也会改变 - 所以我使用的媒体查询没有任何问题：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style type="text/css">

        body
        {
            background: blue;
        }

        @media (max-width: 321px)
        {
            body
            {
                background: red;
            }
        }
    </style>
</head>
<body>
    Here is my content...
</body>


Edit为我解决这个问题的是双重（“或”操作）媒体查询，用于最大设备宽度或最大宽度。这就像 David Rönnqvist 的第一个建议，但它只是把max-width, max-device-width两者都在对我有用的媒体查询中。

@media screen and (max-device-width:640px), screen and (max-width:640px) {
    /* styles here */
}

BBTony，我希望这对你有用。

我保留下面的内容是因为它比我在其他地方找到的问题更完整的描述。我非常不喜欢我的第一个解决方案（线下），以至于我重新研究了第一千次 - 感谢这个帖子这给了我上面的解决方案，没有荒谬的！重要。

编辑：这也有效，但非常不优雅：将“!important”放在媒体查询条件 CSS 的每一行上。

我不愿意提议作为一个answer，但经过三天的疯狂研究后，这是对我有用的第一件事。

问题的完整描述：我有与 BBTony 类似的症状。我有视口标签（并且按照建议将其放在样式表上方）。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

我的媒体查询旨在捕获任何小型设备，但运行 iOS 5.1 的 iPhone 3gs 忽略了它，但运行 iOS 6 的 iPhone 4s 正确地接收了相同的媒体查询。

@media only screen and (max-device-width:640px) {
   /* many styles here */
}

非常奇怪的是，虽然旧版 iPhone 忽略了媒体查询中的大多数声明，但其中一些声明were受到尊重。然而，正如预期的那样，较新的 iPhone 4s 尊重媒体查询中的所有 CSS。在 Safari 桌面上，媒体查询都运行良好，在两个断点处（有 2 个）。

阅读完后，我通过几个不同的检查器检查了我的 CSShereCSS 错误可能会导致移动浏览器忽略媒体查询。在确定我的 CSS 兼容之后，我把!媒体查询中每一行 CSS 后面的重要声明- 比如 80-100！重要的。

Presto.

我无法告诉你这让我有多生气，这甚至起作用了，我很好奇为什么旧的 iphone 在这种情况下只尊重 !important 的条件。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

iphone

css

responsivedesign

mobilesafari

iPhone 忽略 CSS 媒体查询。存在视口标签。在桌面上工作 的相关文章

  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障？

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么

  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div

  • 虚拟乐器 iPhone 应用程序中的 VoiceOver 辅助功能？

    我收到盲人用户的评论 称我的一些声音和音乐相关应用程序只能在关闭 VoiceOver 的情况下使用 在 iOS 设备上启用 VoiceOver 辅助功能后 是否可以启用音乐键盘或鼓垫触摸区域 以便在点击键盘键或虚拟鼓组 等 时可以立即播放音

  • insertNewObjectForEntityForName：

    我使用 Xcode xcdatamodel 文件编辑器设置了一个实体 我创建了一个名为 Person 的实体 添加了一些属性 然后生成了一个 m 文件来表示它 一切都很好 现在 当我去编写一行代码时 例如 Person person Per

  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

  • Webpack 4：如何使用 LESS 获取 CSS 源映射？

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说

  • React 设置背景颜色与状态 rgb

    所以我根据数据库的结果生成一个表 在数据库中我保留 rgb 值 例如 75 75 75 现在当我生成列表时 我想使用保存的值设置我的 td 的背景 tbody this state boxes map box i gt tr td box

  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc

  • 未知异常和崩溃

    当我尝试快速滚动表格视图或从远程重新加载数据时 我的应用程序崩溃了 当我先进行远程获取然后滚动表格视图时 一切似乎都工作正常 我不知道下面的崩溃日志意味着什么 它只是有时工作正常 有时崩溃 Incident Identifier 710A1

  • 使用 css 简单地将对象居中，无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以

  • 将图像作为框架放置在 iframe 周围？

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes

  • 最大宽度调整以适应文本？

    不是最好的标题 但无论如何 我有一个元素max width和一些文字 如果文本长度超过一行所能容纳的长度 我会得到以下结果 My text here hello everyone 换句话说 它占据了完整的最大宽度 但由于单词向下移动 右侧有

  • Angular - CSS - 自定义类型=文件输入，如何使用按钮而不是标签？

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了

  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定

  • iPhone 上的语音识别

    我需要开发一个识别语音的 iPhone 应用程序 并根据结果执行进一步的任务 我知道iPhone 3 0不支持语音识别 我需要在服务器端实现语音识别软件 我只知道这个事情 因为我是新手 所以我不知道如何处理 意味着我需要购买哪些软件并在服务

  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde

  • iphone sqlite 静态链接？

    有人静态链接 sqlite 而不是使用动态链接 吗 我遇到的问题是 越狱手机的用户没有与普通 iPhone 所采用的 sqlite 版本相同的版本 因此导致崩溃 我假设在我的应用程序中静态链接已知版本的 sqlite 就是答案 我需要全文支

  • Glib 在 iPhone 应用程序中的使用

    我想基于现有的开源 Objective C 框架开发一个 iPhone 应用程序 但是该框架广泛使用了 glib 库 我找不到一种方法来构建和包含 iPhone 应用程序的 glib 库 非越狱 有什么办法可以做到这一点 或者有没有推荐的方

  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad

  • 从超立方体图像中获取文本的确切位置

    使用 tesseract 中的 GetHOCRText 0 方法 我能够检索 html 中的文本 并在 webview 中呈现 html 时 我能够获取文本 但图像中文本的位置与输出不同 任何想法都非常有帮助 tesseract gt Se

随机推荐

  • CA2000 将对象引用传递给 C# 中的基本构造函数

    当我通过 Visual Studio 的代码分析实用程序运行一些代码时 我收到一条警告 我不确定如何解决 也许这里有人遇到过类似的问题 解决了它 并愿意分享他们的见解 我正在编写一个在 DataGridView 控件中使用的自定义绘制单元格

  • 为什么VS中的Debug模式比Release慢？

    我已经用谷歌搜索过这个问题 通常答案相当复杂 而且我并不真正理解所有的行话 有没有简单的解释为什么调试模式这么慢 为什么不总是在发布版本中运行呢 调试模式已关闭所有优化 以确保连接的调试器按预期工作 一个版本将会开启很多优化 比这更简单的我

  • 清除 Java 缓存

    我想知道如何使用 Java 代码或 CMD 行代码清除 Java 缓存 这应该在 Windows 7 及以上版本的 Microsoft Windows 计算机上完成 这应该在多台计算机上完成 因此文件路径会有所不同 该应用程序使用 Java

  • 查询GAE数据存储时如何修复索引错误？

    当我尝试对按日期排序的数据存储运行查询时 出现以下错误 NeedIndexError no matching index found The suggested index for this query is kind Message pr

  • 根据 bin 大小将列表分为多个列表

    我有一个包含超过 100 000 个值的列表 我需要根据特定的 bin 宽度 例如 0 1 将列表划分为多个较小的列表 谁能帮我写一个Python程序来做到这一点 我的清单看起来像这样 0 234 0 04325 0 43134 0 315

  • .R 脚本文件位于 PC 上的哪里？

    我想找到用于 R 中计算的脚本 R 文件的位置 我知道通过输入对象函数 我将获得正在运行的代码 然后我可以复制 编辑并将其另存为新的脚本文件并使用它 要求查找 foo R 文件的原因是 好奇心 了解数值计算中使用的算法是什么 更直接的是 函

  • C++ Visual Studio 编译错误

    我收到以下编译错误 致命错误 C1189 error 错误 使用 C 运行时库内部头文件 我对此完全不知道 谁能解释一下吗 完整的错误 C Program Files Microsoft Visual Studio 8 VC ce incl

  • 使用一次性使用令牌将 Auth0 实现到 chrome 扩展中

    我正在制作一个 chrome 扩展程序 我想为我的 chrome 扩展程序创建一个安全方法 以阻止它在没有我参与的情况下被共享 我有一个想法在某个地方生成一个令牌 通常是一些后端 也许是网站的服务器 该服务器获取我用 worpress 构建

  • 跨不同类加载器覆盖默认访问器方法会破坏多态性

    我在尝试使用以下方法重写方法时遇到了奇怪的行为默认访问器 ex void run 根据Java规范 如果类属于同一个包 则类可以使用或覆盖基类的默认成员 当所有类从同一个类加载器加载时 一切正常 但是如果我尝试从中加载子类separate类

  • Windows 上缺少“magic”库的文件

    我需要获取 Windows 上某些文件的 mime 类型 所以我已经安装了python magic 在 32 位 python 2 7 3 上 这取决于unixmagic图书馆 作者指示获取regex2 dll zlib1 dll and

  • 如何获取 xsd 验证失败的无效 xml 文件的元素

    我目前正在使用 XSD 来验证我的 xml 这部分工作正常 我的问题是我想获取无效的标签 值的元素 InputSource is new InputSource is setCharacterStream new StringReader

  • Golang net.Conn 并行写入

    我有多个 Goroutine 共享一个 net Conn 对象 他们可以同时发出 Write 调用吗 我主要关心的是已部分完成的 Write 调用 假设我打算写 100 个字节 但只发送了 30 个字节 所以我需要再发送 70 个字节 为此

  • JPA条件查询中的条件where子句

    我面临 JPA 标准查询的问题 如何使用 if else 在条件查询中添加多个 where 子句 我的要求是 CriteriaBuilder builder getEm getCriteriaBuilder CriteriaQuery qu

  • 如何在 BottomSheetDialogFragment 内的 ViewPager2 上启用拖动？

    有一个BottomSheetDialogFragment并且在片段布局和打开方面工作良好的垂直拖动状态STATE EXPANDED模式 有一个recyclerview在它里面并垂直拖动可以在底部工作表上工作 但它不起作用recyclervi

  • 检查日期是否在范围内

    我正在尝试检查 mm dd yyyy 格式的日期是否大于今天且小于从今天起 6 个月后的日期 这是我的代码 var isLinkExpiryDateWithinRange function value var monthfield valu

  • WPF 消息框窗口样式

    如何将默认的Windows样式应用到标准MessageBox in WPF 例如 当我执行下一个代码时 MessageBox Show Hello Stack Overflow Test MessageBoxButton OKCancel

  • Tomcat、Docker、日志记录和 STDOUT？

    我在docker中运行tomcat 但看不到日志 它们被写入到 tomcat logs 下的各种日志文件中 但是当 tomcat 在 docker 容器中运行时我看不到它们 这是我的 Dockerfile FROM tomcat 7 jre

  • HttpClient.BaseAddress 的目的是什么以及为什么我不能在第一次请求后更改它

    所以我们大多数人可能都读过我们应该重用HttpClient而不是使用using并创造新的 这意味着我只能创建一个实例HttpClient在我的程序中并调用GetAsync每个请求使用完整的 uri 字符串 这引导我到BaseAddress的

  • 如何更改 ASP.NET MVC 使用的“ReturnUrl”参数的名称？

    ReturnUrl有点丑 我想用redirect反而 如何指定应用于表单身份验证重定向 URL 的参数名称以及 Authorize 属性 或者我是否必须创建 IAuthorizationFilter 实现 Example Authorize

  • iPhone 忽略 CSS 媒体查询。存在视口标签。在桌面上工作

    编辑 这对我来说完全是菜鸟错误 我正在编辑与我正在测试的文件集不同的文件集 向所有回答帮助我的人表示诚挚的歉意 我对所有答案都投了赞成票 因为我至少从你们那里学到了更多关于媒体查询的知识 但没有人提供答案 请问现在如何处理这张票 这是网站上

热门标签