I want to apply a zoom factor to the entire body of a webpage via CSS (or JS if CSS-only is not possible). This would be easy in any modern browser, I can just use a CSS rule like:
body {zoom: 75%;}
This works correctly in Chrome, as you can see in these screenshots: the original page:
scales correctly in Chrome:
However, unfortunately I have to support IE 11 :/
And the same solution doesn't seem to work in IE 11: as you can see, applying a zoom factor to the page body doesn't scale the contents, it resizes the body element itself, making it smaller:
I tried compensating by changing the size of the body to something higher than 100%, but while this brings the body back to full size, it also disrupts the page layout (elements start overlapping/separating in weird ways)
EDIT: various comments suggest using scaling, but I already tried using
transform: scale(0.75);
but this doesn't give the result I want in either Chrome or IE. With scale I obtain a result similar to screenshot 3 in both browsers, the only difference being that in this case the body is centered with a white rectangle around it, instead of anchored to the top-left corner (which I assume is because I'm not using transform-origin: top left, if I also add that I obtain exactly the same result as in screenshot 3).
Is there any way to do this in IE? Ideally I would like to have the same behavior as if the user actually zoomed the browser window using CTRL+ or CTRL- (which does work correctly in IE, and gives me the same result as in the 2nd screenshot)
EDIT 2: sample page where you can test this, just press F12 and try to apply a zoom < 100% to the body element. In chrome the entire page will scale, in IE the body will shrink instead (ps: on my PC this page makes the IE dev tools hang for a few seconds when you open them, but just wait a bit and they will start responding again)
Related
I noticed today a strange behavior of Firefox, which I can not explain. An element (img) which is inside a div box and has a height : 50% will not be half the size of the parent.
Instead it has a size of only 2 - 3 px (the parent is at least 80px high at my resolution). In Chrome everything is displayed as expected.
HTML Code:
CSS:
Have also searched for this behavior on google. The only thing I found was a firefox setting (about:config browser.enable_automatic_image_resizing) for automatic scaling of graphics. But this did not fix the problem.
Thanks for your help!
First off, this is not the zoom issue that I've seen in other questions. Also, I'm testing this using an iPhone 4, running iOS 6. In working on a mobile project, I discovered an issue with the viewport tag and mobile safari. I distilled everything into code as basic as I could get it. I have there parameters set:
width=device-width
height=device-height
initial-scale=1.0
maximum-scale=1.0
user-scalable=no
It all works fine, until you rotate the screen. Nothing gets resized, and a black bar appears on the right side to fill in the gap (see screenshots). If I remove height=device-height completely, the problem goes away. However, I do need to use this parameter. Otherwise, I will have to ask a different question.
After rotating back to portrait mode, that black bar remains, and I can scroll left and right. This is a very strange issue. Removing width=device-width does something else unexpected. I have the code here if you would like to try it: http://toastd.net/viewport.html
Here are some screenshots:
Here it is working fine in portrait mode:
When rotated to landscape mode
Then rotated back into portrait mode
The meta tag will help define rules for the viewport but you still need to apply visual styling to address the change in orientation. Give these CSS values a try:
body { width: 100%; height: 100%; }
If you'd like a good resource to help continue your project, PhoneGap has a starter app on GitHub that you can fork.
PhoneGap Start
I believe this is a bug on Safari, but I figured out a way to work around it. It has to do with certain elements and their styles. By process of elimination, I narrowed it down to a few "offending" HTML elements. Deleting width: 100%; from some elements and CSS styles, as well as other static widths like width: 120px; would start to get reduce problem. I say "start to reduce", because the margin on the right became smaller, but didn't go away completely. I then started playing with other CSS attributes like margin and padding. After getting rid of some left and right padding from some elements, the problem finally went away. But this wasn't really acceptable, as those styles were there for a reason.
The solution was to wrap everything in a container element, size that appropriately, and set overflow: hidden; in CSS. Setting overflow: hidden; to the body or html tags would work too, but that did funky things with vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.
Like I said, I think this is a bug in Safari. When you rotate from Landscape to Portrait, everything should be resized back to fit portrait mode. Visually, everything does look like it was resized properly. However, Safari must have thought something wasn't resized properly, so it displayed the page wider than it really was. This works just fine in Chrome on an Android device. I also added different background colors and borders to highlight which element might be causing the page to stretch beyond the width of the device screen. Visually, there was no apparent culprit.
If you're thinking it might be a width: 100% plus padding issue, I had the same thought. But then deleting either the width or the margin/padding alone should have fixed the issue, which it did not. Not a single element was sitting beyond the edge of the screen. There was nothing but empty space there.
I was testing a website: This Website
When I stumbled upon the following problem. everything looks correct in all browsers I tesded on my computer (IE, Chrome, Safari, Firefox etc...) but When I test this website on iPad, in safari browser I get strange margin at the right side, I can't show a screenshot, but in a nutshell image all website page like you see it on computer, but shifted to the left side (so there is blank space on the right side). Can anyone suggest what is causing this?
EDIT:
I noticed that this margin is somehow affected by margin of arrows that you can see on the sides (used to list through slides). Styles of the buttons have following id's
#prevslide and #nextslide
EDIT2:
As code is very long, I will post links to stylesheets used in website here.
Slideshow stylesheets, #prevslide, #nextslide style rules can be found in second stylesheet
Style1
Style2
And main stylesheet I use to style how website looks, however I dont think that the problem lies within it.
Main Style
It looks like your problem is because of the combination of % and pixels in your css.
For example, your .header wrapper is set to 100%, but the .in-header inside it is set to 1020px. This is fine as long as your browser window is wider than 1020px, but when it shrinks, .header is sizing itself in relation to the browser window, and .in-header isn't.
Set the min-width property on your body element so it won't ever reduce below the size of your main page elements:
body {
min-width: 1020px;
}
You'll need to set a meta tag in the header for the ipad (and mobile):
<meta name="viewport" content="width=device-width" />
This instructs the browser to set the page body to match the tablet size. I'm not 100% sure this is the exact setting you want, but I don't have my iPad handy to test; whatever the solution, it lies in this tag.
I'm making a page to scale down to fairly small browser sizes, including on desktops. I've got it down for pretty much every browser but firefox; it just doesn't make the content smaller the same way as other browsers.
Say I have a simple page like this:
<body>
<div style="width:auto; max-width:500px; margin:20px;background-color:black;"> Some filler text </div>
</body>
If you try that in any browser but firefox, when you resize the window to smaller than 540px, the div gets smaller, as you would expect. But in firefox, it does no such thing. At least not in 8.0. It resizes the div a tiny amount and then lets it extend off the window, without even leaving a scrollbar.
Is there any way around this behavior?
EDIT: I've reproduced this is on older versions of firefox as well, but I found something odd. When I said it resizes the div a tiny amount, here's what happens: the body of the page stays at 367px width. Two different versions of firefox, two versions of windows, the same number.
The issue you're running into is that in Firefox depending on the exact themes or extensions in use as you resize the browser window the browser content area may not resize (because, for example, the various buttons on the widest toolbar impose a minimum width on that content area due to the way the user interface is laid out).
This is why you see the body not changing size: the CSS viewport itself is not changing size. If your page had a vertical scrollbar, you'd see that scrollbar disappear off the right edge of the window, just like parts of the browser UI itself disappear.
You can work around this with enough toolbar customization (e.g. remove everything from the toolbars) if you just need this for testing. On the other hand if you just need this for testing you can probably jut load the site in an iframe which you then size however you want...
Wanted to say something about your comment regarding "width: auto" vs "width: 100%" but I can't comment yet...
You can set "width: 100%" and make it account for padding and borders by also setting "box-sizing: border-box" - you'll need to use the vendor prefixes I believe -moz- and -webkit-. Not sure if it will solve you problem, but it's good to know - maybe try it out and see what happens.
It works in IE and Safari but breaks in Chrome. You can view the page here http://www.archemarks.com.
It only breaks at a middle zoom point so you have to zoom in and zoom out and at this middle point the table breaks.
This made me think it was something minor that as the browser re-drew the page..the changing pixels available caused it to make something bigger than normal...or smaller and broke the layout.
Chrome has development tools which should make all of the CSS and HTML available.
I tried fiddling witht the size of the text in put box and the containing column and row..but this did not help as I was only guessing.
Any non-guessing advice.
I can repost the code but it might be easier to just view the site using Chrome Development Tools
It's the width of your .t2_c1 rule. At only 100px, it isn't wide enough for the Email Again text. this is undoubtedly because of the font size conversion being just slightly off as the browser compensates for the zoom. Changing the .t2_c1 rule width to 110px and then the .t2_c2 width to 250px fixes this issue.