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">
Related
The resulution width of the phone is 375px.
The phone shows a page of an app and it has a width of 980px.
This creates a zoom out effect making everything on the page smaller than it should be.
See screenshot from desktop-chrome with the iPhone 6 device turned on. It looks the same on the real device and on android etc.
Other pages work as expected.
Could be related to css.
I think you forgot to set your meta viewport tag (to this):
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
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.
I've read a few of the related StackOverflow questions:
here, here and here,
but I feel like I am still without an answer.
I have a great responsive design (very simple), that looks great however you re-size the browser on desktop. Now when I inspect the element via Chrome and use their phone preview, everything is so small and tiny. The background doesn't stretch like it does on desktop. The main content doesn't fill the area like it does in the desktop, even when the browser is re-sized to be the same resolution as a phone's.
Yes, I've included the viewport specifications.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Honestly, no matter how much I play with the width, it doesn't seem to change anything - in the desktop browser, or on mobile.
Why does a webpage look completely different in a phone's browser than it does in desktop with the browser shrunk to the exact same resolution?
Maybe the user-scalable=0 instead of no?
content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0"
So we're making our site mobile friendly but we're not even close to being done yet. Our desktop version works well but has big tables (that we are getting rid of -- slowly). In the meantime our mobile frame <section> cuts off our content. We would like it to show everything and just allow the user to zoom and pinch and scroll on their device like other non-mobile friendly sites. How do we do that? We have tried <meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />
with no luck. Thank you!
This is what I use on almost all of my sites
<meta name="viewport" content="width=device-width initial-scale=1.0">
Edit: changed width
I want to make an HTML page that fit on any portable device and fill the screen and dynamically sizes its content. Also it should work on iPhone and Android. And the users should not be able to resize the page.
I have tried these ideas:
make the layout a with width 100% but still the user can zoom in/out
I have used DIV tags but it did not fill in the screen on the iPad but works well on the iPhone.
I hope you have a good idea to help me out.
If you have already tried using percentages and are unhappy with the results, I recommend you look into using CSS Media Queries. By determining the resolution your website is being viewed in, you can optimise it for each device specifically.
If you want to disable zooming for your website in mobile devices, make sure to add this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />