Question

我现在真的很茫然，因为我的项目突然停止了正常工作。

我使用Appcelerator Titanium制作了一个Android应用程序。该应用程序有一个菜单系统，当按下该菜单系统时，将从我的网站加载一个网页。该网站是我目前正在开发的自定义WordPress主题，它使用CSS以根据查看网站的窗口大小重新排列屏幕上的元素。

除此之外，我还使用了谷歌Chrome浏览器的开发人员工具来预览我对网站所做的更改。开发人员工具非常方便，可以在多种屏幕尺寸上查看您的网站。

一切运作良好，但在某个时刻，webview开始忽略CSS中的媒体查询。我怎么知道webview忽略了媒体查询？它是在我上传最终的CSS版本时开始的。我没有得到任何错误，它只是停止了工作。

我在媒体查询之外有几个CSS可以正常工作，当更改h2标签的颜色时，所有设备都按照它们应该进行同步。但只有在应用程序的webview中才会忽略媒体查询，查询之外的所有内容都可以正常工作。使用我的手机浏览器，我可以使用正确的CSS查看te网页，使用Chrome的开发者工具我也可以看到具有正确CSS的网页。通过我的应用程序中的webview，我只看到页面应该显示的内容而没有媒体查询。

有趣的是，它在之前和之前一直运行良好，直到最终的CSS版本只有webview忽略了媒体查询。我尝试重新安装应用，清除应用缓存，清除手机和PC浏览器缓存，WordPress缓存插件，重建CSS但似乎没有任何效果。

所以这是我的CSS文件，位于我网站的wp-content / themes / theme_name文件夹中：

body {
    font-family: arial, helvetica, verdana;
    height: 100%;
}

.header {
    background-color: #1be;
    top: 0;
    height: 250px;
}

.content {
    background-color: #fff;
    margin-left: 2%;
    width: 100%;
}

.footer {
    background-color: red;
    margin-top: 5px;
    width: 72%;
    height: 50px;
}

h2 {
    color: #8b3988;
}

p strong {
    color: #8b3988;
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    #header {display: none;}
    a:link {text-decoration: none;}
    a:visited {text-decoration: none;}
    h2{font-size: 30px;text-align: center;}
    .footer{display: none;}
    ul{display: inline;list-style: none;}
    ul li {background: url('images/itemBackgroundx300.png')bottom left no-repeat;height: 102px;}
    ul li a:link {width: 125px; margin-left: 5%;color: #8b3988;text-decoration: none; font-size: 20px;display: inline-block; vertical-align: middle;}
    ul li a:visited {width: 125px; margin-left: 5%;color: #8b3988;text-decoration: none; font-size: 20px;display: inline-block; vertical-align: middle;}
    ul li img{width: 100px; height: 100px; display: inline-block; vertical-align: middle; margin-left: 10%;}
    ul li p{display: inline-block; vertical-align: middle; }
    p img{margin-left: 2%; width: 96%; height: auto;}
    p a:link {text-decoration: none;},
    p a:visited {text-decoration: none;}
    table{width: 96%;}
    table td{border-right: solid 1px #d7bedb; border-bottom: solid 1px #d7bedb;}
    td:first-child{width: 65%;}
    .content div img{display: none;}
}

Answer 1

我真的没有很好的方法来测试它，但我会检查媒体查询中的CSS语法是否有错误。例如，p a:link {text-decoration: none;},

后面有一个逗号

如果我在你的鞋子里，我会尝试的一些事情是删除查询中的“唯一屏幕”并使用“all”进行测试。

Titanium webview加载WordPress网站但没有CSS

1 个答案: