CSS media query problem only when the App is built

[felipericcetto]

Hello,

I created an App using the

window.open('a href="http://" rel="nofollow"http:///a.....', 'cordova_web_view', 'location=no');

and I am using this CSS on my web site:

@media only screen and (min-device-width: 320px) and (max-device-width: 640px) {
}

Testing on iPhone 5S with the Appery.io Mobile Tester works perfect.

But when I built the App for Android and installed the .apk, the web site opens but does not apply the above CSS.
but when I use the "_system":

window.open('a href="http://" rel="nofollow"http:///a.....', '_system');

works.

So the problem is not my CSS media query.

Does anyone know what is causing the problem?

Thanks

[Evgene Karachevtsev]

Hello,

You should add cordova_web_view for Android this way:
http://docs.phonegap.com/en/2.2.0/gui...
But in fact it is better to use InAppBrowser: http://docs.phonegap.com/en/3.3.0/cor...

[felipericcetto]

Evgene,

With cordova_web_view how can I put what you sent in the Appery.io? I could not understand how to use it on appery.io.

Using InAppBrowser, i tried:

window.open('a href="http://" rel="nofollow"http:///a...', '_blank', 'location=no');
but ocurred the same error.

In both I am using as a JavaScript when the user click a button.

Thanks

[Evgene Karachevtsev]

Felipe,

To be honest we tested it on Android, but everything should work on iOS too.
Here is how you can test:
1) create a new application
2) on the starting screen add button. on click on the button add this code
prewindow.open('http://appery.io/app/view/xxxxxx-xxxxx-xxxxx-xxxxx-xxxxx/Screen1.html', '_blank');/pre
where xxxxxx-xxxxx-xxxxx-xxxxx-xxxxx - guid of your application
3) create a new page in the application with the name Screen1
4) add to the page Lebel. add lebelo class zzz
5) create a new css. in this css add this code
pre.zzz{
color:green;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.zzz{
color:red;
}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1080px) {
.zzz{
color:blue;
}
}/pre
6) make the application public
7) export it to .apk.

When we tested an application in the browser color of the label is green
When we tested .apk on the device (min-device-width: 320px) and (max-device-width: 480px) - color of the label is red
When we tested .apk on the device (min-device-width: 481px) and (max-device-width: 1080px) - color of the label will be blue