1

我真的希望这个问题没有得到回答,因为我在任何地方都找不到它......我有一个使用媒体查询来呈现不同数据的网站,无论它是否是移动设备。我还有一个带有调用该站点的 web 视图的移动应用程序。它适用于所有 iOS 设备,但仅适用于某些 Android 设备……某些 android 设备是否没有在 webview 中实现媒体查询?

这是我的 CSS 媒体查询:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
    #mobileBody { display:inline; }
    #header, .wrapper, #footer { display: none; }
    body { background:none; background-color:black; }
    .mobileLogo { width: 85%; margin:50% auto 0; }
    .mobileLogo a img { width: 100%; }
    .mobile_fb_login { width: 50%; margin:10% auto 0; }
    .mobile_fb_login a img { width: 100%; }
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
    #mobileBody { display:inline; }
    #header, .wrapper, #footer { display: none; }
    body { background:none; background-color:black; }
    .mobileLogo { width: 85%; margin:10% auto 0; }
    .mobileLogo a img { width: 100%; }
    .mobile_fb_login { width: 50%; margin:10% auto 0; }
    .mobile_fb_login a img { width: 100%; }
}

@media only screen 
and (min-device-width : 321px) and (max-device-width : 568px) {
    #mobileBody { display:inline; }
    #header, .wrapper, #footer { display: none; }
    body { background:none; background-color:black; }
    .mobileLogo { width: 85%; margin:10% auto 0; }
    .mobileLogo a img { width: 100%; }
    .mobile_fb_login { width: 50%; margin:10% auto 0; }
    .mobile_fb_login a img { width: 100%; }
}


@media only screen 
and (min-device-width : 569px) and (max-device-width : 767px) {
    #mobileBody { display:inline; }
    #header, .wrapper, #footer { display: none; }
    body { background:none; background-color:black; }
    .mobileLogo { width: 85%; margin:40% auto 0; }
    .mobileLogo a img { width: 100%; }
    .mobile_fb_login { width: 50%; margin:10% auto 0; }
    .mobile_fb_login a img { width: 100%; }
}

@media only screen 
and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait ) {
    #mobileBody { display:inline; }
    #header, .wrapper, #footer { display: none; }
    body { background:none; background-color:black; }
    .mobileLogo { width: 85%; margin:40% auto 0; }
    .mobileLogo a img { width: 100%; }
    .mobile_fb_login { width: 50%; margin:10% auto 0; }
    .mobile_fb_login a img { width: 100%; }
}

@media only screen 
and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    #mobileBody { display:inline; }
    #header, .wrapper, #footer { display: none; }
    body { background:none; background-color:black; }
    .mobileLogo { width: 85%; margin:10% auto 0 !important; }
    .mobileLogo a img { width: 100%; }
    .mobile_fb_login { width: 50%; margin:10% auto 0; }
    .mobile_fb_login a img { width: 100%; }
}

如果可以的话请帮忙 :-)

4

0 回答 0