webkit-overflow-scrolling: touch;
This works perfectly in terms of scrolling, but it blurs the text and images noticeably in the <DIV> with overflow: scroll applied. I have tried this on 3 different iPads with iOS5.
The easing/bounce algorithm native from Apple are much better than any JS equivalent, so I would like to start using this new feature! It is even more noticeable with the font I am required to use.
Here is a demo you can try from an iPad w/ iOS5:
http://sseeger.drivehq.com/test.htm [Stark, NO webkit-overflow-scrolling: touch;]
http://sseeger.drivehq.com/test2.htm [Blurry, webkit-overflow-scrolling: touch;]
The issue you were seeing is due to the default zooming of the ipad. Paul's response was on the right track but also unnecessarily disables user zooming. You just need to correctly set the initial scale and width of your screen.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
For my test case, try opening these two pages on an ipad:
http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/blurred.html (Blurred)
http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/not_blurred.html (Not Blurred)
-webkit-perspective: 0;
worked for me.
It doesn't seem to be blurring in the iOS simulator. I can see why it would be blurry though with webkit-overflow-scrolling being used, as it needs to render the content differently when there is momentum involved (at least that's what I think).
As for a solution, you will have to wait for Apple to address the issue (if it even is affecting a wide audience).
Try adding the following meta tag to your header section of your page.
<meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = "no"/>
Related
I want to force browser, to set virtual viewport to a fixed value.
Typically the meta viewport in responsive page looks like:
<meta name="viewport" content="width=device-width, initial-scale=1">
i found a solution to set width to fixed value:
<meta name="viewport" content="width=1200px">
But unfortunately it works well only in chrome. What i want to get is with width lower than 1200 i want to turn on the zooming functionality.
Does anybody knows any other trick to do it?
EDIT
Actually the problem is, that i managed almost all layouts with bootstrap to achieve responsiveness. But client decided, that he don't want this page to be responsive, but make the width fixed regardless of device width and toggle horizontal and vertical scrollbars if needed.
What i am looking for is a realy easy warkaround, to do this without hudge style modifications.
Give this a try in jQuery:
if(screen.width < 1200){
$("meta[name=viewport]").attr("content", "width=device-width, initial-scale=1, user-scalable=yes");
}
I have tried every variation I can think of to try and get my site to show up correctly on mobile. I've entered these codes into my head tags, but to no avail:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />
And all other variations! Nothing makes me able to change the original look of the site on mobile, or allow me to zoom in or out! I have no idea what to do next. If there's ANY advice you guys can give, I'm desperate.
The site is www.justthestork.com
Sounds like you want your site to load as it does on a desktop browser but zoomed out? In that case you want to give your content a constant width that's larger than the screen size:
<meta name="viewport" content="width=1024">
This means that your page will layout into a window that's 1024 pixels wide (you can adjust the width to see what looks best). The browser will then zoom out until it fits on the screen.
If you don't specify a viewport <meta> at all, the browser will pick a default width (e.g. 980px).
Try this one here, it should force the correct screen size:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
I'm wondering about how to set the 'intial-scale' so that on various devices the width of the site fits the width of the screen when you 1st load it.
My website
http://bam.net16.net/BAM/
It works just fine on regular browsers but I had weird behaviour with text inflation + iframe being half blank on mobile device browsers.
The viewport meta tag is helping me. This is working ok now.
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=0.3, maximum-scale=1.0, minimum-scale=0.3" />
<meta name="apple-mobile-web-app-capable" content="yes" />
At the moment if the initial scale is big and the site starts out zoomed in then the portion of the iframe within the site that is off screen is never drawn when you zoom out. If have it set with a small initial scale so that it starts way zoomed out you can zoom in and it all works OK.
<meta name="apple-mobile-web-app-capable" content="yes" />
What fixed my problems was actually removing all those meta tags above and adding this line to my CSS:
html * {max-height:1000000px;}
This fixes the font inflation/boosting that was making my website not work on mobile in the 1st place.
Without any of those viewport meta tags, all browsers I tested* will automatically zoom to the page width.
*default, Chrome and Firefox on android.
I was trying to use fixed auto scaling background image for a website design I'm working on. Everything works fine here...
http://cssdeck.com/labs/3e2as8xw
...however, the scaling and fixed background combination does not work on iPad. For some reason, when the fixed background-attachment is activated in css, the background image tries to scale according to the whole size of the body (the whole text, not the screenArea/body). Therefore, the image becomes useless and too big if the site content is too long.
As far as I can google, it looks like background-attachment is not suported for iPad. I'm looking for alternative solutions in this case. Any ideas?
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
Use ios meta tags.
This will prevent scaling:
<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
I'm trying to make my site more "responsive" on mobile devices.
http://healthybodyguru.com
I've tried a lot of variations of the "viewport" meta tag, which is currently:
<meta name="viewport" content="width=device-width, initial-scale=1" />
But for some reason on my HTC Vivid, the page loads quite zoomed in:
Any ideas how I can adjust the viewport so the page is 100% visible on my Android?
Maybe try something like this:
<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1"/>
I'm still trying to understand the viewport to be honest. But I think, I maybe got it now. The viewport width should be set to the default viewable width of the content. For example: If you just have an <img/> with width: 320px, than the image will be fullscreen if you use the code above.
initial-scale=1
Is causing it to load zoomed in. You can either remove it, or replace it with maximum-scale or minimum-scale (for whatever you're trying to achieve).
This code is working for me great ... I hope it will work for you too ...
// fit the width of screen
myWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
// remove a weird white line on the right size
myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);