I am using cordova with jquery mobile for one android app.
For Viewport meta tag i am using below code
<meta name="viewport" content="width=device-width,
initial-scale=1.0;maximum-scale=1.0;user-scalable=0; target-densitydpi=device-dpi">
With older jquery mobile version it was returning actual height and width of device but when i have upgraded jquery mobile to 1.4.5 and cordova to 5.0 then it is returning some different resolution with window.innerHeight and window.innerWidth
Based on this resolution i am taking css files with media query
Please help me with this
Regards,
Bindal
My current workaround:
In index.html: <meta name="viewport" content="user-scalable=no, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, width=device-width, viewport-fit=cover">
In index.css the "body" part, add: transform-origin: 0px 0px; transform: scale(0.5);
window.innerHeight and window.innerWidth has the native resolution.
But haven't run test if one pixel is one pixel. Also I don't have enough device to test if it works across different device and different version of android.
With this mets it works for me, try it
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
Media queries are the wrong approach for several reasons:
you will not get an exact match for your screen, proportional layout is for some elements impossible
You will not be able to target Android 4.0+. Quad-HD and older devices use the same proportion with different -device-pixel-ratio factors. Factors are interpreted differently through Android versions, so some displays will be messed up
media queries are intended to supply DIFFERENT visuals for different resolutions, not the same visual scaled across resolutions
I recommend using https://github.com/biodiv/cordova-anyscreen (and drop jquery mobile). It will also give you the correct display and available resolution as app.deviceWidth, app.deviceHeight and app.containerWidth etc.
Related
I'm developing Android app with Phonegap and have problem with different screens. I searched a lot and everyone recommends to use meta tag , so I have include it in my html:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
when i'm testing it in emulator , it's exactly what I want , but when I tested it on Samsung galaxy S4 and Samsung galaxy s2 , it's very small. S4 is showing it much more smaller. One even cant read content ( I think it's because of xhdpi and hdpi). So can anyone advice me how to deal with it? Thank you very much!
The problem that you're having is because of the target-densitydpi=device-dpi. It's trying to utilize the high resolution your phone has. The default meta tag that PhoneGap starts out with has extra details that is causing this "problem".
Change your meta tag to:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
and it should work fine.
You should using CSS to control the UI base on the screen size & orientation.
ex:
#media only screen and (min-width:768px) and (max-width:959px)
Ref docs: CSS media queries
I am trying to set up MQ's to make a site responsive. I have it linked and everything it working fine, with one caveat the max-width: 480px doesn't work for droid. It does recognize my mobile stylesheet when I up the max-width to around 900px.
I haven't been able to find an answer to this yet, I have played around with some viewport tags:
<meta name="viewport" content="width=device-width" />
and
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
What is the best way to target Android phones using media queries?
One problem you might be running into is the fact that Android phones, even more so then Apple phones, have varying pixel widths.
For example, if you were testing on a Samsung Galaxy S3 or S4, the pixel width of those phones is well beyond 480px in landscape mode, even accounting for pixel density, so the media query would never fire. When it comes to some of the newer devices, you are better off to target user agent and then serve mobile queries based on that header response.
Also, see this answer for more details on testing for mobile devices.
You want to start by changing your meta tag to
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Good luck!
I have a webapp with fixed width layout at 1280px.
I need to adapt this webapp for mobile.
Basically I need to fill the whole device screen width with 1280px by scaling acordingly.
I managed to do this by using viewport meta tag with fixed width.
<meta name="viewport" content="width=1280, user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>
It works great in mobile chrome browser.
Now I need to wrap this webapp inside mobile app.
I picked Phonegap, but as it turned out it won't work as good as chrome browser did.
It doesn't do any scaling, everything is huge.
How can I get it to work? Is it even possible with phonegap to scale fixed layout accordingly in order to fill the screen, without breaking the layout? Or maybe there's any better alternative to phonegap?
What i understand, you have a fixed width, so thats the problem.
1280 is also a lot :)
I suggest that you build your site with a responsive framework eg. http://jquerymobile.com/
I always use:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I just started convert my website having 'Responsive Web Design'. I installed the "Web Developer" Plug-in for Firefox ( http://chrispederick.com/work/web-developer/ ) to check, if it's working. Everything looked fine.
Now I tried this with my android phone. I didn't work correctly for portrait mode...
I tracked the problem down to wrong handling of the #media-selectors at the phone:
This page ( https://worldtalk.de/m/test.php ) generates a CSS that outputs what height/width and device-height/width + orientation the browser using as parameters.
I got the following results:
portrait, 800x1200
landscape, 800x400
The orientation was correct, the width/height and device-width/height were the same for both orientations.
But the device (HTC Desire Z) just uses a wrong screen resolution (800x1200) for portrait mode. I would like to avoid having a device database with user-agents or something like that.
Additional Information:
Browser-Version: WebKit/533.1
Android 2.3.3 / Sense 2.1
HTC Desire Z (T-Mobile firmware)
JavaScript reports identical screen resolution
Questions:
Is this only my phone model or a general behavior of the android browser?
How to fix this?
After some more investigation on that topic I found the following solution.
You need to put in the following <meta>-Tags to tell the browser to disable the scaling. Then the CSS #media selectors are working as expected.
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">
See: How can I "disable" zoom on a mobile web page?
And: http://garrows.com/?p=337 (EDIT: http://garrows.com/blog/disable-mobile-browser-zoom-function
Regards,
Stefan
-- edit --
When applying the above solution: For some devices the device-resolution reported when using "scale=1.0" is lower than the physical screen resolution and you'll possibly have effects like blurred pictures. This is caused by the higher dpi (dots per inch) of the screen. The screen size reported in JavaScript is however correct. For small screens with high resolution the correct "physical pixel" resolution can be achieved by using:
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
<meta name="viewport" content="width=device-width">
However, this should cause problems with screen where the dpi-value is lower. It seems safer to use the screen resolution reported by JavaScript.
-- edit --
Use commas instead of semicolons to avoid Chrome console errors about 'Viewport argument value “device-width;” for key “width” not recognized. Content ignored.'
http://royaltutorials.com/viewport-argument-value-device-width-for-key-width-not-recognized-content-ignored/
I have just developed an iPhone app using Phonegap and I now tried to post it to Android using Android SDK and guide available on Phonegap website. Everything works good except screen resolution and as I tested it on Android Emulator setting Nexus One Resolution, I found everything is too small and leaves half the screen empty. Is there a setting I need to put to make it exactly float like on iPhone?
UPDATED
I am using this viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
Use meta Veiwport tag or CSS media queries for multiple screen support
References :
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
http://www.quirksmode.org/mobile/viewports2.html
http://www.quirksmode.org/mobile/tableViewport.html#metaviewport