If you open my page at http://goo.gl/68s0t (Please don't replace the link here as I don't want google to link this page to my site.) on an android phone and move your finger from left to right, you also move the content.
What is the cause for this and how do I make the content fit in horizontally so moving to the right and left with your finger does not cause movement of the screen?
Specify the width of the container and overflow: hidden to force any content to cut off at that width. If you want to be able to scroll vertically, use overflow-x: hidden to only cut off horizontally.
Early versions of Android have sub-optimal CSS compatibility, so your best bet is testing it out on those devices with trial and error.
Related
I am really struggling to understand why the portrait mobile version of my website scrolls way left!
I have removed the header image which is quite large but the width still scrolls of to right of the screen!
I have applied the common viewport code in my head tag and played around with css widths but to no avail.
There should be no scrolling left or right on the mobile version of my site.
Any clue as to what element/#media set-up is causing this width issue with the mobile css?
danieltuffour.com
Many thanks!
From a quick glance at the developer panel, you're using min-width:900px right now, which always keeps a width of 900px, regardless of what the width tag is set to. The easiest fix is to do the following:
#mediacontainer {
min-width:100%;
/* other css... */
}
This way, the content will always be 100% the width of the viewport. Now, another alternative would be to set a max-width on the element which would prevent it from overflowing the screen:
#mediacontainer {
width:900px;
max-width:100%;
/* other css... */
}
This method allows you to specify 900 pixels, but prevents it from displaying that way if there aren't 900 to use.
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.
I'm working on a project where I have a stationary bar (to become nav bar), and then directly below it is a rectangle which is setup so that when you click it, it flips over. The width of both the nav and the flipping div are supposed to be the exact same, and they are when viewed in FF, Chrome, Safari, IE...but when I just checked it in the Android browser, the flipping div is about 10 px less in width than the nav bar. I've narrowed this down to the fact that I'm using 'display: table' in the div 'outerContainer' to vertically and horizontally center the contents of 'innerContainer' (which is set to be display: table-cell). This is an example of how I currently have it setup, which displays correctly in all browsers but the width of the flipping box is less in Android browser: http://jsfiddle.net/adRP4/9/
As soon as I remove the 'display:table' from .outerContainer, it displays in the Android browser at the proper width, however the content is no longer centered as I want it. This example shows the display: table removed will the proper width displaying, but the content not centered as I want it: http://jsfiddle.net/adRP4/10/
The vertical/horizontal centering method I used is based on: http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html (similar to http://css-tricks.com/vertically-center-multi-lined-text/) ... when I tried changing it to the method outlined her: http://css-tricks.com/centering-in-the-unknown/ I ran into all kinds of problems...
Any suggestions on how to fix this?
UPDATE (6/28)--I discovered that when I check an iPhone, I have the exact same width mismatch as in the Android browser..
Thanks,
Mark
I'd suggest to use a DIV for the flip, and then, adding a div filling the flip and set as TABLE.
Or I suggest using the floater in the method 3 here : http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Has anyone been able to create of find an open source way to implement a horizontally scrolling Grid view? For phones a vertical scroll makes sense as apps are usually used in portrait mode, but on tablets when in landscape a left to right scroll seems much more usable then a top to bottom scroll.
I ended up going with a page swipe motion to swipe left and right one page at a time as demoed by Google in the Google IO 2011 app
My biggest annoyance with browsing websites on my Android browser is reading text with indented blockquotes. Android's webkit implementation (correctly, in my opinion) sets the width on any text element to the browser width.
However, this means that list and blockquote elements which have left margin or padding applied to them hang over the right edge of the visible screen. This makes for annoying reading experience, as the user has to be constantly scrolling right and left to read.
This behavior is visible in just about any site viewed on Android, and my feeling is that this constitutes a bug in the browser.
But my question is: does anyone have a good css solution to preventing this issue? I've tried wrapping all body text in a block-level element with max-width: 100%, but elements with left padding or margin still hang off the edge.
You should be able to fix that by setting the box model for the div/p/li etc.
-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;