I'm new to the responsive designs and I've run into an odd problem with scrolling. It seems that every time I scroll, the viewport seems to keep re-sizing. I've tried using the <meta name="viewport" content="width=device-width"> with initial scale set to 1, but no use. I'm also using media queries.
I also did a test where I turned everything off and used jQuery to detect a re-size event using an alert. Zoomed in with pinch zoom and tried scrolling and got a viewport re-size alert. I also noticed that after I scroll, the scroll bar will flash twice in indication of a sizing event going on.
It seems as if I'm missing something in my setup.
Any ideas?
The viewport is indeed re-sizing because the browser bar hides or appears when you scroll.
If you are reliant on a "real" resize event you could check whether the width has changed.
Related
I am currently using Apaxy (an Apache directory browser). The theme looks beautiful on PC, but on mobile, it's a little too zoomed out. Is there any way I could force-zoom in if a mobile device is detected?
For a little more detail, this is what I mean:
What actually happens: http://imgur.com/xGNjdk2
What I would like to happen: http://imgur.com/8yTJkOJ
I can't seem to figure out a way to do this using viewport, but maybe I'm just not thinking.
You can use the viewport meta tag to set an initial-scale: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
However, setting an initial scale will load the page "off-center" since it'll start off zoomed into the top left corner. I think what you really want is to set width=device-width in the viewport meta so that the page lays out into a size appropriate for the screen size.
e.g. <meta name="viewport" content="width=device-width">
I have been working on this for days now. Looking through countless articles and trying a lot of different ideas that I have had.
All I am looking to do is have a background image or element that is 100% of the browser height.
The problem is that whenever the address bar shows and hides the available space changes and the picture resizes causing an annoying jump.
I am using a full screen image slider called maximage 2 (http://www.aaronvanderzwan.com/maximage/)
First I tried to make the html or body containers aligned to the top and 120% high so that when the address bar goes away it will still cover. But the image still resizes as 120% of the new size is still different.
I have also been trying to store the original browser height and then adding to that number to compensate for the address bar and resizing the slider to the new size.
I was thinking in the way of using device aspect ratios and taking into account something that stays fixed such as the width, but this would vary from device to device and not be reliable.
Does anyone know of any simple and clean ways to simply cover the background of a mobile device with an image slider without using a percentage that will resize?
I had the same problem. The solution was to set the background hight to window height via jQuery and block the resize event while the scroll event is active.
That way you can scroll let the address bar disappear and have no nasty resize jump happen.
https://stackoverflow.com/a/31546432/1612318
I'm using Anddown to convert some markdown text to html and I want to display the html in a webview. The webview is part of a fragment that takes up around half the screen on a tablet in landscape.
I want the html to appear at 'normal' scale, as in I never want it zoomed out so you can see the whole page. Most of the time this is fine since text in blocks wraps when it reaches the end of the view. But some of the markdown elements result in an html element which stretches the view horizontally, so I've got something that looks like this:
----
----
----
--------------
----
(imagine the dashes are text, the short lines are wrapping correctly to the fragment width)
When I load that to the webview, the page is zoomed out fully so that that long horizontal line fits the width of my view. I don't want this, I want the webview to always be zoomed in. The weird thing is that sometimes when I load the html to the webview, it will automatically zoom in to what I want (but with some horizontal overflow). This doesn't happen every time and when it does, I can see the zoomed out version for a split second before it resizes.
So my question is, how do I get it to default to 'zoomed in' always? I don't care if it means there's some horizontal overflow, I just want the text to be 100% in scale (if that even makes sense).
For normal scale you should use this viewport tag (on your html's header):
<meta name="viewport" content="initial-scale=1, maximum-scale=1,minimum-scale=1">
Now, if you want different scale you can change these settings (for example use a scale of 2)
Hope that answers your qauestion
If you're using text.
Have you tried using
word-wrap:break-word;
So the text won't be outside it's parent
I've been banging my head against the wall for the whole day now, and i need some help :(
The problem is, that i have a WebApp that was designed for 640x960.
We didn't have time to write css for each screen size, so i've used initial-scale, maximum-scale, minimum-scale in the viewport meta tag to scale the app to different screen sizes.
The problem is, that in Android 4.4, no matter what i do, it always scales the app up, but never down!
I mean if i use a value of 0.7, the app is scaled up. If i use a value of 1.3, it is scaled up again :/
I've tried to change the targetSdkVersion to different versions to get the old behavior, but with no luck.
Can someone help me?
UPDATE:
So i ended up using style="zoom: <value>%" on the body tag. I calculate the percentage based on the difference between the current device screen size and the resolution my app was designed for. Now everything fits.
A viewport of
<meta name="viewport" content="width=640, initial-scale=1">
should make your fixed layout always fit (see MDN for more on the viewport meta tag).
You could be bumping in some of the following:
the contents can't be scaled down more than 'overview scale' (that is, such that your content is narrower than the screen). This is by design - making it smaller only results in rendering white to the sides so why bother. If you want this behaviour you'd need to add padding to the content,
you've specified the layout height of the WebView to be WRAP_CONTENT - this makes the WebView ignore the viewport meta tag, don't do that - set it to MATCH_PARENT or a fixed size,
you're using certain WebSettings:
setUseWideViewport (which overrides the viewport meta tag) or
setInitialScale (which can alter the size of the viewport).
The best way to check if it's the content's fault or the WebView's fault is to see if the page works in Chrome on Android:
if it works in Chrome on Android but not in the WebView then set targetSdkVersion to 19 and try disabling WebSettings, changing your layout to fixed size, etc.. to see what's causing the problem. Maybe start from the other end - by making a super trivial WebView app that just loads the page - confirm that works and then slowly introduce changes to see which one causes the problem,
if it doesn't work in Chrome on Android then problem is the difference in viewport meta tag support between pre-KK WebView and Chrome on Android - this means you'll have to fix your content,
If you're still stuck post a zip that contains sources with a repro (doesn't have to be the full app, just the minimum to demonstrate the problem) and I can try and help you more from there.
Just had a run through of this after not quite being sure of the answer myself.
http://www.gauntface.co.uk/blog/2013/11/29/desktop-site-and-the-viewport/
You want a viewport without an initial-scale if you only want the webpage to fit the WebView's width.
Things that will affect the WebView:
Ensure you have setUseWideViewport() enabled so the page can be larger than the devices width: http://developer.android.com/reference/android/webkit/WebSettings.html#setUseWideViewPort(boolean)
Ensure you targetSDKVersion=19 to ensure you aren't getting any compatibilities for the old webview
If you want to prevent the user from zooming in or out, use user-scalable=no in the viewport rather than set a min and max.
Is it possible to scroll out of the page bounds in a webview?
Example: Webview page/content width: 15px, screen size: 10px. Can I scroll to X position 8px?
Technically I can, and it worked fine on my test device. However, testing on other devices I notice that it will stop rendering when I move out of the bound. The left part of the page will be 'blurry' or not visible at all, till I scroll back left and there is no more "empty space" in the webview, than it will update.
Is there a solution for this?
A possible solution would be making the content larger on the fly, with white space. But I cannot add padding to the webview, unless I put it in the html BEFORE I render it. But before I render it I won't know the width. After I render it there is no way to change the padding/add some empty space to the content, without loading it completely again. Right?
I solved this by added 1-2 page-breaks at the end of the html, it will render fine now and I customly prefent the view from scrolling to the end of the page, so that the white is not shown to the user.