We developed an app with WebView. I thought I got everything to display to full device width until we tested it in a Nexus 5 running KitKat. At first I couldn't get the page to shrink on any device and fit without scrolling until I implemented the following:
<meta name="viewport" content="target-densitydpi=device-dpi, width=400px">
Target-density is the only thing that had an effect on changing the display size that I could find. And it worked... until Nexus 5 with KitKat. When displayed in the Nexus 5 it does the opposite now, it shrinks and I can't figure out how to display it to full width. I started looking again and found:
Viewport target-densitydpi no longer supported
Previously, WebView supported a viewport property called
target-densitydpi to help web pages specify their intended screen
density. This property is no longer supported and you should migrate
to using standard solutions with images and CSS as discussed in
Pixel-Perfect UI in the WebView.
Source: http://developer.android.com/guide/webapps/migrating.html
When I use this:
<meta name="viewport" content="width=device-width">
It displays too big again with scrolling bars and all the other devices would do the same thing.
I've found solutions (can't remember them anymore) that would work with Chrome and other browsers but not with WebView. Webview seems quite strict.
Any ideas how this can be remedied?
Try to add viewport meta tag in this manner. Hope it works for you in all the browsers.
Related
When a div reaches the length of about 140-150 chars then the div's font size can surprisingly change. I've created a sample - if you open it in an Android version of Chrome or Firefox, you'll see the issue. (It work well in Safari and Opera)
Please note that the JS code only add characters to the page and doesn't change font sizes!
Animated sample: https://ferenk.dev/share/samples/buggy_divs.html
Static samples (compare the look and the HTML of the first and the second page): https://ferenk.dev/share/samples/buggy_divs_simple_1.html
https://ferenk.dev/share/samples/buggy_divs_simple_2.html
If you put the same text to a textarea then its size will not change.
Notes
There are some workarounds like using display: inline-block, but I need the features of the block display.
You can play with the font size, too, and it sometimes helps. But the issue can reappear after another change in a more complicated layout, and you will not know why.
The trick of <meta name="viewport" content="width=device-width, initial-scale=1"> suggested for another similar issue doesn't work either.
I don't know if it's a real browser bug, but it's very strange. My test pages are so simple that they should be rendered correctly. I've never experienced this problem with desktop browsers. And I had some tests with IOS (Chrome, Safari) and it also seemed to be OK.
I hope that this is just a "feature" of the browsers which can be disabled easily.
I am experiencing some issues with a website I am trying to build. I did some research (like always) among this and other websites (as usual) and like never, I was not able to find a solution that worked for me. Please have patience with me since I am a beginner (developing for practice and learn purposes).
So here's the deal. I started building a website but I got stuck in making it responsive. After the research I was talking about earlier I used the
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
It works as long as I am accesing the website throught the Chrome Browser for Android. It also works in Chrome for Windows when I select the mobile view or resize the window. The only browser that acts like skipping that meta line is the stock Samsung Browser (WebKit - it think, though not sure about the name).
Is there anyone that experiences the same thing? I was thinking is only my phone (Galaxy S2) but it seems that I am not the only one with this issue.
Thanks in advance and looking forword for a solution.
LATER EDIT
Worked around with the values. Seems like the <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes, target-densitydpi=device-dpi"> is actually not ignored.
I played around with the max zoom values and it seems to work. The only issue now is that the stock android browser does not display the page acording to the #media screen and (max-width: 640px) present in the stylesheet file...
LATER (FINAL) EDIT
The css code was somehow faulty. Deleted the multiple screen resolution support and worked around only with the normal web view, then added support only for one resolution (#media screen and (max-width: 500px)) seemed to work (anyway, there are just a few devices out there that has width lower than 500). Now in regular view, the site successfully shows the content according to the CSS file. Shrinking the resolution will also display the page in a correct manner. I also noticed, that using "max-width" should be done in ascending order (first deal with high resolutions resolutions first).
I'm trying to create a simlpe responsive layout (JSFiddle) for a web app and struggle with the rendering on mobile webkit browsers.
They shrink some of the floating elements in a (to me) unpredictable way.
Layouts work well with desktop browsers and Firefox and Opera on Android but not with Chrome on Android and seemingly Safari on iOS (tested with Kitkat smartphone and simulated in Chrome for Android and Apple devices):Simulated Nexus 4 Rendering(Text in blue and orange areas should be as big as in the white area)
It seems it doesn't matter which exact CSS attributes I use; I tried CSS tables, boxes, floats, flex-boxes and lastly -webkit-boxes - all with the same result: Too small headers and footers
This is part of a project on Google Script, so unfortunately I am not in control of the viewport meta-tag, but a quick try with a local file and a <meta name="viewport" content="width=device-width, initial-scale=1"> tag didn't solve the issue either.
Has anyone experienced this before and has an idea how to fix it?
Thanks!
It seems this answer by moeffju is relevant to your problem:
Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.
https://stackoverflow.com/a/12965146/5297207
Using the Chrome emulator and adding this property to the P elements in the white area made the text adhere to the CSS font-size. (It makes the white text small like the blue and orange, not them big. The original sizing is small).
See the comments of the original answer I linked to for an explanation of why this works, and also some warnings about problems that might occur from using this fix. I've used it successfully on a couple of sites but didn't do very thourough testing on Safari.
When testing my desktop (not responsive) website on my smartphone, i noticed differences in rendering the site in chrome (34.01847.114) and in the native Android browser (4.3). In Chrome the page is rendered without zoom as i want. In the native browser the paged is zoomed in. I do not use any viewprt-tag.
When i set the viewport tag to
<meta name="viewport" content="width=device-width">
chrome behaves like the native browser and zoomes.
So i do not want any zoom, i want the site to be rendered in full resolution.
To prevent zoom you shoyld use:
<meta name="viewport" content="initial-scale=1">
Hope it helps :)
Are you sure that the page is in fact zoomed in the Android browser? My observations are that a previous zoom is often kept active if you just reload the same page over and over, which can be misleading you into thinking that this is how the page will load for users. However, use of refresh/reload aside, the page will load fine when normally loaded. Because of that, I'd advise to make sure you navigate to a new page when it comes to check on zoom behavior reliably.
Otherwise, if you still have issues and your desktop site has a fixed-width, you can simply set the viewport to that:
<meta name="viewport" content="width=fixed-width,initial-scale=1">
Where fixed-width is your fixed desktop target width in pixels.
That will give you a full width and rescale accordingly to each mobile device's screen size.
I have a website with the following configuration:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=5.0;minimum-scale=1.0;user-scalable=1;" />
and a div element with the
<div style="position:fixed;top:0;left:0;width:100%;height:40px;">Fixed Header Content</div>
(you can find the example here: http://massmatics.de/demo/test.html)
When watching this site on iOS and zooming, the size of this element increases but is getting out of the zoomed area.
When performing the same action on android (tested on a Nexus Tablet with Android 4.x) the fixed element disapears while zooming but when this action is finished it appears in a increased version on the zoomed area.
I think the behavior of chrome is right, but my question is now:
Is there a way to get the same behavior on android as on iOS?
The reason why I am asking is that I have a lot of content on the page which should be zoomed when viewed on a small device, but on Android the enlarged fixed element is taking all the space so zooming is not really a advantage.
Best regards
Update: I added a JS Implementation of the position:fixed to my example (with bad performance, I know, just for testing purposes.) - still the same behavior as with position:fixed. Is there an event whether the user zooms the page?
position:fixed support was just added last year in iOS5 - and from my experience, Android handles such elements inconsistently.
I believe the only predictable way to accomplish what you are trying to do is to wire it all up with JavaScript. Probably not the answer you were hoping for, but position:fixed is rarely the right solution on mobile anyway.