I already looked at the solutions under scale fit mobile web content using viewport meta tag but didn't have any luck with the samples provided.
My problem is that I have 940px wide web page which needs scaling up or down depending on the device viewport width. I'm using Phonegap to port web pages into an Android app.
If my viewport is over 940px, like on my 1200px wide phone, then the code below works fine. The viewport zooms just the right amount so that page fills the display:
var mvp = document.getElementById('view');
var ratio= screen.width / 940
mvp.setAttribute('content', 'width=device-width, initial-scale='+ ratio +', target-densitydpi=device-dpi')
However, if I have a low resolution tablet with a width lower than 940, the page is too big to fit, and needs moving around in order to see the off-screen parts. Based on discussion in the aforementioned thread, I tried the following, but no combination of viewport settings will force it to scale to 940, so that the view port can "zoom out" to the right size:
if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + screen.width)};
or
if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + 940)};
do not work. In fact, setting viewport width to any value manually just doesn't have any effect at all.
What I am I doing wrong? I just want the viewport width to zoom out so the whole width of the 940px page shows correctly. There must be a combination of viewport settings that will do this for me. I'd appreciate help.
The width value of the viewport meta tag sets only the layout width or "initial containing block" width. i.e. If you give the <html> element a style of width: 100%, the width it will end up in pixels is what you set in the viewport meta tag.
If your page is really 940 px (because, for example, you give your html an explicit width: style="width: 940px"), then width in the viewport tag wont have any effect (well, depends on which browser and other quirks - so setting it to 940 is a good idea).
So it's just a matter of making sure the page loads fully zoomed out. Browsers won't let you zoom out further than the content width of your page so you don't need a special case for larger screens. Chrome should load the page fully zoomed out. Firefox and Safari, as far as I can tell, usually load the page so that the width= attribute you set in the viewport tag fits in the device screen (hence my caveat above). So you really don't have to do much with the viewport meta tag:
<meta name="viewport" content="width=940">
Should do the trick, for both larger and smaller screens -- assuming your content is actually 940px wide. If that doesn't work, chances are your content has some size dependency on the viewport size or you have an extra wide element somewhere - a link or example to the content might be helpful.
Related
i put iframe of Bandcamp embeded player on my website, but the background-image of my track look blurry.
i made this cover in Illustrator in 2400x2400 and i exported in Png24.. When i look the background image in Bandcamp the image seems in good quality.. i dont understand what to do to view the cover in my website in good quality.
you can see it in https://mauditemachine.com/
i tried to see what happened if i change the background-image to 1 instead of 8
<div id="art" class="item" style="background-image: url("https://f4.bcbits.com/img/a2126636077_8.jpg");"></div>
i see a better quality but i cant force it..
when i tried to change the size to 400x400 in the iframe code i have better results but i want to have 300x300 sizing.
i just change iframe parameters to select 100% for width and height.
In my Css i put width and height to 400px to a container above and for responsive design i put 300px
I'm using an svg placed as an img, but it appears huge in my browser.
I added a height and width to the tag, but then it appears small. When I inspect it, I can see the box as the size I specified, but the logo is much smaller inside it.
How do you correctly specify a size for svg?
Here's the code <img src="<images/logo.svg" alt="logo"/>
I had it as <img width="558" height="58" src="<images/logo.svg" alt="logo"/> but the width and height came out smaller in the browser. Without them, it took up the whole area and was huge.
Does anyone know if there is a workaround for this? Internet Explorer 10 and Window phone 8 are not able to correctly scale background SVG images when a user zooms. Looks like IE rasterizes the SVG on load.
Here is an example: The first image is the SVG as a background image. Zoom in on a MS Surface or Windows 8 phone and you'll see it blurs horribly.
The second image is the same SVG as an img tag. Zoom this on a Surface or Windows 8 mobile phone and it scales as you would expect (nice and clean).
Is there any property that can be added to make IE10 behave? Or is it merely a case of waiting for the folks at Redmond to fix it?
The problem is that IE, and other browsers such as Firefox rasterise the SVG before displaying it, so it will become blocky when zoomed.
The easiest way to fix this is to make the SVG file larger than is needed. For example double the size, or more if the user is likely to zoom in further. You can then resize the SVG image with CSS to display it at the correct size. This way the image will be naturally larger, so wont become blocky, unless you zoom in even further. At default zoom level the image is scaled down rather than up, which browsers usually handle better.
Edit: You can find further info on this issue under the “SVG and CSS Backgrounds” heading at http://dbushell.com/2012/03/11/svg-all-fun-and-games/
After rotating my blackberry device (Torch 9860) from landscape to portrait, the height doesn't update. Printing the value of window.innerHeight shows that the value doesnt change. sometimes when I reload the app in portrait mode it has the correct height, rotating to landscape works correct.
In the head I defined the viewport like this:
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0">
In CSS I defined:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
I also tried to set the height (and width) myself in the window.onorientationchange listener to screen.height, but this value is larger than the viewport (about 1.5 times).
What am I doing wrong? What can I do so the body always has the screen size?
I'm actually looking for a solution to a similar issue: I’m trying to display an element of 100% of the visual viewport height. My problem is that my viewport height takes into account the address bar (so 100% is 100% but minus the scrollbar height), which I don’t want (since if the user scrolls, the address bar will not be visible, and therefore my element will be too small).
For your problem, I think you just need to remove "height=device-height" from your viewport meta tag like I dind, since BB devices seem to not compute again this value on orientation change (which looks like a bug to me).
Sorry for my English!
I am looking of a good example for dynamic 3 columns layout like this one from Google Search. I have see, that if the layout fits to every browser resulution. That menas, there is never a scroller if the resulution is 800, 1024 or >1024 . What kind of solution, can I use to become such effect? I have see, that the center content is floating, but how is it possible to fit for every resolution and is there a minimum of the width of the center, because if the browser goes smaller and smaller, there is a point, where the scroller is coming.
It will be great if anyone can redirects me to an similar example, please! I am interested in centered design, not left oriented like Google!
There is one CSS feature..
Here it is Google HTML5 site, where included this feature... Just try to change width of browser and scrollbar will not appear.. because css file has styles like
#media only screen and (min-width: 641px) and (max-width: 800px) { /* styles */ }
i.e. for some resolution you have some other styles..
take a look they css
Have a look at the CSS float tutorial, which I refer to every time I want to do a multicolumn. http://css.maxdesign.com.au/floatutorial/