使用 PhoneGap 时 CSS 媒体查询不起作用

发布于 2024-12-23 06:54:22 字数 441 浏览 0 评论 0原文

我正在使用 PhoneGap 和 js/css3 开发 iPhone/iPad 应用程序，最近开始使用 iPad 较大的屏幕尺寸对我的布局进行具体调整。我在 CSS 中添加了一个仅包含 iPhone 的部分，其中包含

@media screen 和 (max-device-width: 480px) {

以及一个仅包含 iPad 的部分，其中包含

@media screen 和 (min-device-width : 481px) {

当我调试时，它们似乎在我的桌面上运行良好（在 win 和 mac 中使用 chrome，在 mac 中使用 safari）。当我在 xCode 中构建我的应用程序并在设备上运行它时，似乎这些部分中的所有规则都被完全忽略，并且我的布局都是错误的。

为了让这项工作对我有用，我应该使用一些技巧吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梨涡 2024-12-30 06:54:22

将视口添加到 html 文档的头部非常重要：

<html>
  <head>
    ...
    <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
    ...
  </head>
  <body>
    ...
  </body>
</html>

另请参阅：
CSS 媒体查询方向更改不起作用 PhoneGap

It is important that you add the viewport to the head of your html document:

<html>
  <head>
    ...
    <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
    ...
  </head>
  <body>
    ...
  </body>
</html>

Also see:
CSS Media Query Orientation Change not working PhoneGap

回复收藏 0 原文

遥远的绿洲 2024-12-30 06:54:22

您可以尝试

@media only screen and (-webkit-min-device-width: 481px) {

只使用 iPad 版块并回复我吗？

Can you try

@media only screen and (-webkit-min-device-width: 481px) {

for your iPad only section and get back to me?

回复收藏 0 原文

~没有更多了~

关于作者

束缚ｍ

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

使用 PhoneGap 时 CSS 媒体查询不起作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

西西弗的石头怪

5397313

烟沫凡尘

一个破名字

萌︼了一个春

当爱已成负担

友情链接

使用 PhoneGap 时 CSS 媒体查询不起作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

西西弗的石头怪

5397313

烟沫凡尘

一个破名字

萌︼了一个春

当爱已成负担

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。