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.
Related
I built a responsive website (http://www.cjkrause.de/borgo-v2) which behaves strangely on both android and ios smartphone devices. I have a navigation bar that seems to force the browser to shrink the whole site in order to fit it into the window. But there is no width set on this bar, so it should just rearrange its content to fit it on the screen.
I already have this in my header section:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
See here how it shows on my android phone:
android appearence
On a desktop browser, even in responsive emulation, everything works fine.
It looks to me as if the problem is with your map towards the bottom of the home page.
It's in an iframe with a hard coded width of 600px, so it doesn't scale down on smaller viewports and causes other elements on your page to expand.
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 have same applications on two devices with different screen sizes, one is 1024x600(180dpi), another is 1280x800(213dpi). This app contains webview with dimensions specified in pixels. On first device it is a little smaller. The problem is that when I load my custom html page, on first device with smaller screen and webview the page is rendered correct, but on second device with bigger screen and bigger webview, it doesn't fit.
I expected page to fit the second webview following white spaces, because page is fixed size and second device screen is bigger.
How to fix this?
Html had this line:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
It was the reason why setInitialScale() didn't work at first.
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" />
I'm working on a webApp that should resize to any screen size a device could have. On iOS and older android versions the viewport tag works fine. The picture on the screen is always resized to fit the screen.
(Like described here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
On the Galaxy Nexus (Android 4.0) it won't work. On the left and right side is about 20px space and I don't know why he does this.
My viewport tag looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
No matter what I change about the tag, the space is always there and the content doesn't fit to screen.
I've made a sample page to show you the effect: http://easyeve.w3y.de/link/index.html
If you open this link on an iPhone the content perfectly fits (you won't see anything yellow = body) and the document width is 320px. On the Galaxy Nexus you will see yellow space and the document width is 360px (which is exactly half of the display resolution). This should be 320px too!
Do you have this problem too and is there a way to fix it?
Update: I've noticed the same Problem on Galaxy Note / Android 2.3.6
Therefore it's not an Android 4 issue. It has to do with the large screen size I guess..
The very same issue here (Galaxy Nexus - Android 4.0.2), I am talking about regular web page in the default browser
Setting viewport meta initial-scale less then 1 (zoom out) seems to be ignored by the browser. Higher values than 1 (zoom-in) works fine.
There are settings in the browser (settings->advanced) where you can change things:
Default zoom - it makes difference, but it does not fix the issue
Auto-fit pages - in my case makes no difference
Everything seems to work just perfect in Chrome browser (beta at the moment), but that is not default browser for ICS / Galaxy Nexus.
UPDATE (solution):
Setting meta viewport "width=device-width" fails on Galaxy Nexus.
Setting viewport "width=1280" works just great (1280px is width of the screen of galaxy nexus).
Beware that setting "width=1280,user-scalable=no" breaks it again (you can zoom out even if there is user-scalable=no) :(
I ran into something somewhat similar on a Galaxy Tab 2. When setting up your WebSettings for the applcation, try setting webViewSettings.setUseWideViewPort(true); This will force Android to consider the viewport meta tag. It was being ignored in the case of the Galaxy Tab 2 for my app and everything in the viewport was drawing incorrectly until I changed this.
I ended up wrangling with this problem today. My issue was a little bit more complex, because I had to deal with a Wordpress stylesheet (from another theme) in addition to the base CSS. Chrome worked perfectly on my phone and tablet and the stock browser worked fine on the tablet, too. However, the stock browser kept zooming out and showing me the desktop view. There were no margins on either side, which was the correct behavior, but the browser should have removed the floats from my sidebar and content divs and zoomed in to the main content (I'm using #media queries). As weird as it sounds, I actually fixed this by first setting the Zoom setting to Far, refreshing, and then resetting Zoom to Medium and refreshing.
I should point out that when I looked at your page's HTML and CSS, I noticed that you set a specific pixel width for your page div. I'm pretty sure you need to use percentages for width instead. For example, my centered content div has margin: 0 auto;, min-width:320px;, max-width:900px;, and width:100%;.