When viewing the following test page with the browser in the BlackBerry 9630 simulator, the text width is wider than the screen width. So, when zoomed to 100%, one has to pan.
http://sites.inka.de/klee/blackberry/text.html
What solutions are there to make the text wrap to screen width?
The browser has a default width for the window, when you zoom, the window keep it's full width, so every website will have this problem.
You can't fix this, since it's an expected behavior.
If you don't want your user to zoom on your website, make the font bigger.
Found the solution:
<body style="margin: 0">
With the default margin, after loading the page, the cursor has the shape of a magnifying glass, allowing the user to zoom in, etc.
Related
When I set the border width to thin/medium/thick and zoom in the page in Chrome, the border size appears the same no matter what my zoom level is.
When I set the size to something else, such as 2px, this no longer happens, and the border starts looking bigger as I zoom in. Is it possible to set the size to something other than the thin/medium/thick presets, but still have their size not depend on the zoom level?
You can't. On Firefox even with thin/medium/thick the border size will resize based on the page zoom and this is the correct behavior. I think this is a Chrome bug because when the page zoom level increase every element with a absolute unit scale with the page, exept the border-width.
I was inspecting my asp.net page in firefox and discovered that the main page container was 1116.9px instead of the 1024 that its supposed to be.
I couldn't figure out what was the cause so I made this test file:
<html>
<body>
<div style="width:100%;max-width:1024px;margin:0 auto;height:1000px;background-color:blue"></div>
</body>
</html>
and inspected it aswell. This one is even worse - 1428px wide. This only happens in firefox. Am I missing something really fundamental here? Whats going on?
This is dependent on the size of your window and device screen. For example, if you have a large monitor and maximize the window to fit the screen, it will enlarge the width. I have a dual monitor setup and I just dragged the window size from the corner to stretch over both screens. I then clicked the Resize tab form the Web Developer Toolbar and it showed : 2442px x 1009px ... However, you can click the Resize to 1024x768 (which is what the page is set to display at normally) and it will resize the window to fit it.
try this...
height:100%;max-height:1000px;
I have a problem with my website.
When I resize the browser window or access the site from a device with a small screen, a white transparent box appears from the bottom of the page and grows bigger as I resize the window.
I have no idea where it comes from and can't find the issue in my code.
To see what I am referring to, try scrolling down to the bottom of this page: [redacted] and make the window smaller.
That looks like your full screen image shrinks too small as the page resizes. And when you resize, the solid background color becomes visible, appearing as like a box.
So you might need to use an approach that stops shrinking that background image when it gets to a certain point so as not to be smaller than the window-height.
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.