In my case I made the div width 500px,
but it automatically zoomed out when browsed in a mobilephone
How's the magic done exactly,is it device specific?
You might want to try something like this in the head of the html page:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
For more info see here:
http://davidbcalhoun.com/2010/viewport-metatag
Edit: the answer below no longer reflects current normal practice. There is now a fairly well established standard called the meta viewport which controls how the page is scaled on mobile. In the absence of this, sites are deemed "not mobile friendly" and mobile browsers show the page at typical desktop width, zoomed out to show full width.
It is browser specific.
It's even a configurable option in most mobile browsers (eg Android, Nokia S60, Opera Mini). I prefer to have it turned off, so that pages open with normal 100% zoom (and if it's cut off, I just scroll).
Some people prefer to see the whole page width at once even if the text is too small to read, then double-tap to zoom up after that.
The browser typically calculates the total width of the page first. In this calculation any flexible-width element is taken to be the minimum width which can fit all its children. If this is less or equal to the width of the browser window no scaling is done, but if it's greater, the browser sets this as the virtual page width and, if the user has turned this option on, scales everything down (like zooming out in a modern desktop browser) so that that minimum width of the page occupies the width of the browser window.
The browser do whatever it wants to. Since mobile phones have a small screen probably this browser zoomed out to be more pleasant to look the page.
Related
I have a 1900px-wide web page at https://zackel.com/50/a0.html that I'd like to display as intelligently as I can on smaller screens, say 1024 x 768. If you show the page now on a 1024-wide screen the left side is cut off and there's no scroll bar to go over and see it.
I've been using
http://www.infobyip.com/testwebsiteresolution.php?url=https%3A%2F%2Fzackel.com%2F50%2Fa0.html&width=1024&height=768&in_browser=true
to view the page on various screens.
How can I get browsers to scroll over to the left to see the Box 1 and Box 2 content there?
Or what do I have to do to the HTML/CSS to get it to adjust on load to a smaller screen?
Thanks
You need a responsive/fluid width design , also if by chance you are using firefox , you can change the resolution of your browser window by pressing CTRL+SHIFT+M
Couple of responsive HTML5 frameworks that might be of help to you --
http://foundation.zurb.com/
http://getbootstrap.com/
In Opera Dragonfly (the Dev tools used in Opera Presto), there is a tab called Utilities.
In that tab, you can "take a screenshot" which loads an image screenshot of the current page into the dev tools.
You can then zoom in/out and use the color picker and the ruler (with sizes being scaled appropriately to the zoom).
This is very useful when cutting markup as it makes it easy to measure spacing, elements, etc... accurately by zooming in.
I'm looking for a similar extension / tool / addon for Chrome / Opera / Firefox that allows me to measure using a ruler when zoomed in but haven't found anything.
Does anyone know of anything that may help?
I've found PixelZoomer for Firefox (https://addons.mozilla.org/en-US/firefox/addon/pixelzoomer/) which fulfills this need.
It allow to zoom into a screenshot made, measure pixels and pick colors.
I know this type of question has been asked many times before but I haven't found an answer to my specific issue yet so I thought i would post.
It's really a bit of a quirk I guess rather than anything else but I have designed a responsive site that resizes nicely in a browser when you resize the window and works perfectly when you load it up in either portrait or landscape on a mobile. However when you load it in portrait and then turn the mobile into landscape some mobile browsers don't load up the correct styling for the new screen size - BUT IT DOESN'T HAPPEN LIKE THIS FOR ALL BROWSERS! So far I have tested it on an Android 4.0.4 version phone using the standard Android browser and it resizes correctly when switching orientations but then on the same phone using google chrome as the browser it applies different styling BUT if you refresh the page it then applies the correct styling.
So my question is how can I force the mobile browser to render the page correctly on orientation change without having to reload the page?
The site in question is www.the-baobab.co.uk and im using the viewport meta tag and setting it to width=device-width and an initial scale of 1 then calling media queries at certain max pixel widths to alter positioning and layout for various different screen sizes which can be seen in my stylesheet1.css here
I want to use After Disaster font on my website, but I can't achieve the same vertical position of displayed text in different browsers. Even more - it is dependent on system too. You may test this:
http://jsfiddle.net/z7rby/1/
On Linux Google Chrome displays text about one pixel higher than Firefox and Opera. On Windows Google Chrome displays it in the middle of background. What can I do with that?
There is no way to solve this problem. You have to accept that fonts will be rendered slightly differently on different systems, and find another way to achieve your visual goals.
You can control your layout via positioning CSS e.g. width, height but not font rendering.
If that level of control is not "good enough" then you can write browser-dependent CSS (tutorials exist online) to compensate for differences.
But please remember the goal in all computing is "good enough": Perfection is not cost-effective!
Once you have achieved a level where further improvements require a certain effort, but there are more important things to spend that effort on, that is the point when you have finished.
In the 2-frame 'rows=' frameset I have, if a user change of the zoom level to less than the 125% value that I coded for, they will see "dead space" between the frames.
This question: How to detect page zoom level in all modern browsers? shows how to detect the browser's zoom level.
Is it possible to adjust the browser's zoom level using Javascript so I can keep users from changing the zoom outside of the desired levels?
Or have I simply forgotten a default coding consideration of some kind? (I've seen CSS's 'zoom' style, where presumably default zoom levels can be set.)
I am also seeing document.body.style.zoom, so seems we could do something like:
if (zoomLevelChange)
{document.body.style.zoom= [some calculation]; }
See How to detect page zoom level in all modern browsers?
Can you edit your question to only be about "adjusting", since the other one has detection covered?