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">
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 want to use viewport to support responsible layout, but when I zoom out, the size doesn't seem to fit for the screen.
When I remove the viewport tag, all I see on my phone is like a computer-browser's style, and when I zoom in, it just makes everything bigger(but I think it should apply the responsible CSS).
Why it doesn't change the layout? I tried on computer through changing the browser's size and it works well.
---add---
the viewport tag is : <meta name='viewport' content='width=device-width, initial-scale=1.0'>
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);
'Sup Stack!
So I've been getting to grips with the viewport meta tag and how it adjusts pages to fit to the devices viewport. I've had some help from stackoverflow earlier here:
Footer will not extend to 100% width on iphone, why?
mainly my concern was that my footer for my website wouldn't extend to 100% width. You can visit the website here:
http://gloryillustration.com/
And you can see my iphone solution here:
http://gloryillustration.com/tests/test13.html
where i managed to sort the webpage to display properly on iphone, by using:
<meta name="viewport" content="width=device-width, initial-scale=0">
And if you were to view this on the ipad the footer is displaying 100% width, but the entire page is now displaying as though its zoomed waaaaay out and its adding tons of white space to the right left of the page and under the footer as well. I take it that the website is adjusting itself as though it is being viewed on an iphone. But im not sure why it's adjusting like that? I would think that the content="device-width" would set the width to that of the device its being viewed on? Or have i misunderstood this completely.
Is there a way to set a viewport meta tag to encompass both ipads and iphones for this website?
Any help much appreciated!
Use this instead:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
You can see the result in play here http://www.premiumdw.com/case-studies/convert-a-960-grid-website-to-a-responsive-design/.
try initial-scale=1 instead of 0
for you wanna have it a 100% zoom, not 0%
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"/>