I'm trying to mimick desktop-style iframes in Android (Dolphin browser) with some succes. The trick used is to put an <iframe> with position:relative; inside a <div> with fixed dimensions and overflow:hidden;, then using jQuery Mobile (or rather just the vmouse events) to handle mouse events for scrolling.
All this works fine except for one thing; Even though the <iframe> is clipped, it's content stretches the browser to match size. This is mostly noticable in height.
Here's simplified example code in JSFiddle: http://jsfiddle.net/euKhG/
And here's the result to watch within the Android browser: http://jsfiddle.net/euKhG/embedded/result/ (only works in Android browser!).
Does anybody know how to fix this issue? I've seen iScroll and similar suggested elsewhere, but they seem to touch frames with a remote src like this.
try setting target-densitydpi in meta tag
<meta id="viewport" name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, target-densitydpi=160dpi"/>
but you'll have to change all other css with respect to this as well
Mmmm, I think you missed something here. Right now your iFrame is getting cut off yes, but not due to you setting overflow:scroll, nor due to you setting a width/height property of the container frame; the cutoff that you are currently seeing is entirely arbitrary.
To prove this, add a background:#ff0000 to your container div, and you will see that it truly is not the div's width / height that is defining the cutoff region of your iframe but rather some 'default' iframe dimension properties: http://jsfiddle.net/kauUr/
My recommendation is, given you said your div is of fixed dimensions, set up your iframe with width/height properties of those same dimensions so that it matches. You can either do this using the width and height attributes, or more cleanly using css justas you have done for the container div. Once you give the iFrame the correct width / height, the cutoff should match what you expect and the browser shouldn't scroll to the size of the contents of the iframe, but rather to your specified dimensions. In fact, even if the div's dimensions aren't known ahead of time, you can use Javascript to acquire them and then correctly size the iFrame in runtime.
<div style="width: 400px; height: 400px; overflow: scroll; background:#ff0000">
<iframe style="width: 400px; height: 400px" src="http://doc.jsfiddle.net" frameborder="0" scrolling="no"></iframe>
</div>
And if that doesn't work, try slapping an overflow:none in the iframe style as well.
Related
I'm trying to write a responsive website that set's the maximum height to 100% and everything is on-screen without needing to scroll. Setting {height: 100vh} works on a flex box in the desktop. However, when I view the site on mobile, then it scrolls, ignoring the height of the browser tab in chrome. I would like to set the height to something like {height: calc(100vh - address bar)} so that it shrinks the height of the document so everything fits without scrolling or hiding the browser tab.
Have you included the viewport meta tags in the head of the web page. From experience this can change the effect that certain CSS has on the mobile version.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that's doesn't work out, perhaps use media queries and use 100% instead of 100vh.
The problem only appears on KitKat with the new WebView mechanism.
Basically I am loading 12 images, one after another in a row. I want the WebView to load all images on a row and auto zoom the webView to fir the entire row.
How it works prior android 4.4
the images are loaded on the row and the zoom is made to fit the entire row. The user can scroll in and out
How it works on 4.4
the images are wrapped, so I have the first image drawn and the next one is under it, not to its right
The html loads images like this:
<meta name="viewport" content="width=device-width, height=device-height, minimum-scale=0.3, user-scalable=yes, initial-scale=1"/>
<style type="text/css">
body {margin: 0; padding: 0; border: 0; float: left; white-space: nowrap;}
.Image .Tile-0-0 {background: url(tiles/tile_0_0.png) no-repeat; width: 128px; height: 128px; float: left;}
.....
and then
<body>
<div class="Image">
<div class="tile-0-0"></div>
<div class="tile-1-0"></div>
.......<br/>
Any ideas? My guess is that somehow I need to tell webview to fit the entire row, not wrap on the device's width.
How could I fix this ?
Android 4.4 (KitKat) has a completely different WebView (based on Chromium source) than previous Android versions. There is a migration guide that describes common problems you might experience.
In your case the first thing I'd check is whether the HTML renders correctly in Chrome.
If it does, try setting targetSdk to 19 in your manifest (this disables some quirks) and see if that helps.
If it doesn't it might be a change in how CSS is interpreted/layout is performed between the two WebView implementations. Try fiddling with your CSS and see if that helps. Using DevTools should make it simpler.
Another thing to look at is the viewport - see if the document.documentElement.clientWidth differs between the two versions. If it does then that's the reason it looks differently. If you're using wrap_contents height try using match_parent/a fixed value.
I've been working on a responsive design. To stop the content from crossing boundaries i've used viewpoint meta tag with width = 480. The problem is i want my website to load with minimum of 480px no matter what. If the screen width is less than 480px I want it to fit the screen width by "Zooming out".
I've used the following viewpoint meta tag:
<meta name="viewport" content="width=480px, initial-scale=1, maximum-scale=1" />
I've also used min-width css tag to specify minimum width.
<body style="min-width: 480px; width:100%; margin:auto;">
So after all this when i tried to load the website in DevTools Emulator (Google Chrome), it shows a horizontal scrollbar. Got any ideas on how to do it.
Have you tried width=device-width?
I don't think forcing the 480px in the meta will do what you want (not crossing media-query-type boundries).
After looking all around for solutions, I am just tired of trying out every straw I find.
So, my situation is like this:
I have a scrollable div with floated images in it and I am using scrollLeft, offsetLeft and style.width to dynamically expand this div.
Now, while this is working great on iOS and PC, on Android (7") the scrollLeft value is scaled down nearly to 50%! However style.width value is not scaled down, like the other ones.
This would be the css for my items:
.slider-item {
margin: 0 13px 0 0;
width: 300px;
float: left;
height: inherit;
}
And my viewport:
<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
My questions:
is there somewhere a complete guide to webview from the HTML/JS point of view? because most of the time I stumble on solutions, where it is necessary to adjust the android-app - i would like to avoid that.
how can I determine the adapted scale of my device using JavaScript or the correct style.width respectively the correct image position?
If someone could explain this to me, I would be so happy!
PS.: Just found an additional bug: When I have scrolled some elements to the left, so far, that I reached the empty area; then tap in the empty area, it actually opens a link of one of the elements, which is by now out of sight! But the point where I tap would fit to the actual position, where the element should be on a normal display.
I am quite lost with this o_O
Edit: I mistakenly had put the wronk variable here: it's the syle.width of my slider-items, which is wrong, not their offsetLeft.
Working with #media might be impossible, as my window.innerWidth is 1280px on android and 1024 on iOS. Both show an offsetWidth or width property for my slider-items of 300px - BUT Android scrollLeft shows 155px, when I already have scrolled away one whole picture, which should have been 300px wide - there's the problem.
have you tried playing with WebView initial scale? Like this: webView.setInitialScale(100);
I have the HTML code below. I have set the body's width to 640px which is close to what the iPhone's resolution is. However, when I view the webpage on either an iPhone or an Android, it shows up just like it would in my web browser - only taking up part of the screen. The text is so small it's not usable.
What CSS code do I use so that the text stays normal in desktop browsers, but fills the screen on a mobile device? I read some things about using device-width properties but I can't get those to work either. What am I doing wrong?
Note
I'm not trying to get the red border to stretch all the way across the screen (eg: body:width100%). I just don't understand why the iPhone is not zooming into an area that is set to the same resolution it is supposed to have.
HTML Code:
<style>
body{ width:640px; border: 1px solid red; }
</style>
</head>
<body>
Hello World
</body>
</html>
Actual Output:
Desired Output:
Put this in your head tag:
<meta name="viewport" content="width=480">
To make the iPhone zoom in on the page, you can use the viewport meta tag.
You can set a scale of 1.0 to make Mobile Safari zoom in on your content exactly, no matter it's actual size.
Here's some documentation on different ways of setting the viewport: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Have you tried body { width:100%; border: 1px solid red; } ?
You'll have to use media queries for this.
http://www.alistapart.com/articles/responsive-web-design/
Example: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html (Resize the page)
A seemingly straight-forward tutorial: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
If you're creating a webapp for iphone, you should really take a look at PhoneGap. If you're feeling a bit adventurous, it really is quite easy to use.