We are designing a banking app. I am working on the design. We are using only html and css and a very tiny bit of javascript (all client side, anyway - server side obviously is different).
The app loads in portrait orientation. When rotated to landscape, all ratios are kept. However, on rotation back to portrait, everything get's resized to a very tiny size. I equate it to when you zoom in on a web page, and on reload the page goes back to it's normal size.
All the styles are kept - almost everything seems fine, except everything turns out really tiny, like an entire 2000px web page has been loaded to fit in the screen.
(Need ten rep points to post the images... sorry)
What is causing this, and how can I fix it?
Try adding this to the "head", if you haven't already:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=medium-dpi, user-scalable=no" />
Related
I seem to have problem when loading html.
without html head and meta tags my page is bigger because of images.
although i have set inline style for them:
""
so basically image should be 100% but limited to screen resoultion.
but in reality they are 4-5 time bigger than my screen resolution.
when i set meta tags the images are displayed perfectly fine within bounds of the page:
however font sizes are broken font-size:1px stated inline, shows something like 14-15px in mobile app
but when i remove meta from html font-size:1px will be really 1px in mobile app.
any idea's how can i solve this issue. also this only happens on android.. on IOS i don't have such issue with meta and font sizes.
you html must be responsive you need to add meta tag viewport
<meta name="viewport" content="width=device-width , initial-scale=1, maximum-scale=1, user-scalable=0" />
Viewport ?
I have a somewhat-responsive Bootstrap website. Above 1200px, the container is 1170px wide and below that, it scales down to 970px. Anything below that will also get the 970px version.
In my meta tags, I have this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Everything works perfectly on Desktop computers as well as on iPhone or iPad devices. However on Android based mobiles like Samsung Galaxy (where the viewport is 360x640px I believe), the website shows fine too in landscape mode, except that it is zoomed in every time a page loads. Meaning it shows fine, but the user would have to scroll left and right. The user can zoom out and then it shows full-width without having to scroll, but the next time a page loads, the same happens again.
Is there any simple way to adjust/fix this?
I tried removing the width=device-width part, but that messes with the design on iOS devices and 1px lines don't show properly.
Try using
#media (whichever desired screens)
html{zoom:0.7} // this value is not calculated just an example
You can calculate using device width / your html width
This is has worked for me .. i need to zoom out on tablets so i added this..
I'm making a website skin / takeover.
It looks good on all browsers except android, where the skin image css parameter (width: 100%) is seen as the screen width not as at least the website's width. So it doesn't wrap the website but stops at the device's screen width. Please see yourself, I cannot explain very good. What can I do?
The first image is the website loaded on galaxy S3 and the second image is the website a little scrolled to see the right side. Please edit my question if you have better words.
This is the temporary link until I will move it to the client: http://csengrosseto.digitalprimes.com
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
This is the version that also controls the zoom.
I'm developing a mobile website. It's working fine on iPhone in Safari using the following meta tag:
<meta name="viewport" content="width=device-width; initial-scale=0.5; maximum-scale=1.0; user-scalable=1;" />
In Android, the website is scaling to about 480 pixels in width and only taking up about half of the web browser, meaning the left side has the website at approximately 480 pixels in width and the right side is blank.
If I change the meta tag to this, it works fine:
<meta name="viewport" content="width=680; initial-scale=0.5; maximum-scale=1.0; user-scalable=1;" />
So "hard coding" the width at 680 pixels works, however I don't want to do this as this website is designed to accommodate multiple sizes. I tried adding target-densitydpi=device-dpi to the meta tag with no luck. What else can I do to have my website scale to the device's width on Android?
I 'solved' it by using $('body').css({ width: $(document).width() }) in jQuery, since the site already relies on JavaScript. I realize this is not a clean solution, but it works and I'm tired, so for now it'll have to do. If anybody has a better solution I'd love to hear it.
i have a website, that is created to be loaded by the webview on android devices
so basically what i am expecting is that the website i am going to load will fit on the screen, i.e. there should not be anything overflowing the page and introduce scrolling
when you load the site in webview in portrait mode, it loads fine, i mean everything is in place, no overflow whatever, image are in its correct size, if i change it to landscape while viewing the webview, everything is still cool, it still scales and displays the same view as it were in portrait mode, u just get that extra space around it.
however, if i load the webview in landscape mode first, it seems the content of my site is enlarged in a way because in landscape, u have that extra width, now if i turn my phone to make it portrait, it is not re-scaling my website content, so the picture is too big in the portrait, and it forces you to scroll to the right to see the entire picture.
i am trying to avoid where you need to scroll to see the content
is it because when rotating webview, say from landscape to portrait, android just take whatever is in landscape mode and put it in portrait, without trying to resize it?
There is a similar bug on iOS where rotating the device causing weird page zooming issues (see https://github.com/scottjehl/Device-Bugs/issues/2 for details). I've found that a good fix for this on iOS is to change the meta viewport tag. The meta viewport tag that seems most common (and used to come with HTML5 Boilerplate) is this:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
However, by removing the initial-scale=1.0, this bug can be sidestepped (on iOS):
<meta name="viewport" content="width=device-width">
Not sure if this fix works on Android, though.