Question

我在ipad上的主屏html应用程序遇到了一个非常奇怪的问题。它是一个相当复杂的单页应用程序，也可以与cache.manifest一起加载以供离线使用。

我有三个css文件：一个全局加一个每个肖像和横向，使用媒体查询加载。媒体查询使用屏幕宽度 - 以确保它们与其他设备正常工作。 CSS加载如下：

<link rel="stylesheet" type="text/css" href="css/ebot.css"/>
<link rel="stylesheet" media="screen and (min-width: 820px)" type="text/css" href="css/ebot-ls.css"/>
<link rel="stylesheet" media="screen and (max-width: 819px)" type="text/css" href="css/ebot-ss.css"/>

在较高的层面上，HTML看起来像这样：

<div class="parent">
    <div id="screen1" class="fullscreen">
        ...
    </div>
    <div id="screen2" class="fullscreen hidden">
        ...
    </div>
    <div id="screen3" class="fullscreen hidden">
        ...
    </div>
</div>

班级.hidden定义为.hidden { display: none; }

当然，在每个全屏div中，还有很多其他元素。当应用启动时，screen1可见，然后通过用户互动，它被screen2或screen3替换。

现在，当我以ipad处于纵向模式启动应用程序时，一切都运行良好。如果我然后将其旋转到横向，一切正常 - 正确应用新样式规则。

当我在风景模式下使用ipad启动应用程序时，我会看到一个非常混乱的屏幕，screen1全屏可见，因为它应该是。然而，由于它具有透明背景，我可以在其元素后面看到screen2和screen3的各个子元素，但是根本没有任何css类应用于它们。此外，可见屏幕1上的元素似乎也只有一些CSS规则应用于它们（例如边框到位，但字体不是）。

如果我将ipad旋转为纵向模式然后再回到横向模式，那么一切都会自行修复。

我将ipad连接到我的mac以从Safari调试它。在调试器中，当我检查元素时，我可以看到正确应用的样式，因此所有规则都没有＆＃34;背景废话＆＃34;应该是可见的。如果在Safari的检查器中我取消选中规则display: none，然后再次检查，那么一切都会自行修复。

总的来说，感觉/看起来CSS仅部分应用于第一次加载 - 并且只有在页面刷新/重绘/重新设置后才能正确应用。

这使得该应用完全无法使用。我不能指望我的用户旋转设备，然后在使用应用程序之前将其旋转回来。

我可以尝试做些什么来解决这个问题？

Answer 1

您是否尝试过定向媒体查询？

SELECT dateadd(hour, datediff(hour , 0, callstartdt), 0) as TimeStampHour, Count(*) as count
FROM table_one
where month(CallStartDt)=5 and day(callstartdt) = 16
GROUP BY dateadd(hour, datediff(hour, 0, callstartdt), 0)
ORDER BY dateadd(hour, datediff(hour, 0, callstartdt), 0);

TimeStampHour               count
2016-05-16 05:00:00.000     1
2016-05-16 06:00:00.000     4
2016-05-16 07:00:00.000     4
2016-05-16 08:00:00.000     113
2016-05-16 09:00:00.000     110
2016-05-16 10:00:00.000     131

Check the documentation了解可能有用的替代方案。

此外，这个元标记在过去一直很好用于iPad等问题

<link rel="stylesheet" type="text/css" href="css/ebot.css"/>
<link rel="stylesheet" media="screen and (min-width: 820px) and (orientation:landscape)" type="text/css" href="css/ebot-ls.css"/>
<link rel="stylesheet" media="screen and (max-width: 819px) and (orientation:portrait)" type="text/css" href="css/ebot-ss.css"/>

视口元标记上的

Some documentation可以清除任何疑问

编辑： Others have stumbled upon this

CSS规则未正确/完全应用

1 个答案: