Are there any wildy used browsers that doesn't support width 1000px plus right scroll?
NOTE: With "support" I mean "if it will support 1000px width without creating a horizontal scroll in the bottom" (sorry for not explaining this in the beginning)
What about IE7 for example?
I don't want to get the bottom scroll...
I know it might look bad on some 1024 screens if there is no space on the side.
I am adding an example so you better will understand:
The reason for asking is beceause I don't want to get a horizontal scroll on my website in widly used browsers. I don't have any old IE version installed, so I cant test it myself.
Note that the 3000px height div will cause a vertical scroll to the right... So the "browser window width" have to be at least 1000px in width for it to work (1024 minus right scroll (minus left border))
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body style="margin:0">
<div style="width:1000px;height:3000px">Will this div creat a horizontal scroll bar in any widly used browser, with window size of 1024 x 768px <? What about Internet Explorer 7 and Internet Explorer 8?</div>
</body>
</html>
They all do, it's more of a matter of which monitors users have. Most sites use 960px-wide, mainly because it works well with 1024-wide monitors, and it is divisible by many factors, making it east to have balanced multi-column layouts.
You can safely go up to about 980px.
I think 960 pixels is the widely accepted standard for website layouts, but 980 is also common. 1000 may be a few pixels too many.
In fact doesnt matter which browser you are using, but the screen resolution and the size of the browser window.
At 1024x768 resolution, with width = 980px (and no side padding) it will not create scrollbar
All browsers support whatever width you want.
What you really care about is screen resolution and the actual viewport width of the current browser window. For example, my 2 screens gives me an effective screen width of 1920+1920=3840 pixels, but I never maximize my browser so the viewport is more like 800 pixels wide.
(I hate 960px grids)
See the article Responsive Web Design for discussion of making a truly width-adaptive layout.
The answer doesn't change with your update to the question. The answer is still:
All browsers support whatever width you want.
If you have enough screen space available to make a browser window wide enough, it will display any width page without scrollbars.
What about IE7 for example?
Since I can stretch my IE 7 window (or IE 8 or 9) to be 3000px wide, IE 7 will display a 1000px wide page without a horizontal scrollbar. Therefore, IE 7 "supports" a width of 1000px without a scrollbar. In that sense, All browsers support whatever width you want.
Related
This question already has answers here:
Is the viewport meta tag really necessary?
(9 answers)
Responsive web design is working on desktop but not on mobile device
(4 answers)
Closed 3 years ago.
As far as I was aware, vh and vw used the height and width of the visual viewport - the size of the browser window, and divided it by 100. Therefore, if you defined an element to be 100vw wide, it will always span the entire browser window, what MDN calls the visual viewport.
When working on my website, I found that an element set to 100vw is only taking up a portion of the screen, and that this is only visible on mobile devices - the error is absent until I open the chrome device toolbar.
The dark grey <section> elements are set to height: 100vh; width 100vw;, and I also have
html,body {
height:auto;
width:100vw;
margin:0;
padding:0;
}
I have tried the website on my phone and the error is still present, but it is not present on a resized chrome window. What have I missed?
Live link
Thanks to Temani Afif for pointing me in the right direction. From MDN:
Narrow screen devices (e.g. mobiles) render pages in a virtual window
or viewport, which is usually wider than the screen, and then shrink
the rendered result down so it can all be seen at once. Users can then
pan and zoom to see different areas of the page. For example, if a
mobile screen has a width of 640px, pages might be rendered with a
virtual viewport of 980px, and then it will be shrunk down to fit into
the 640px space.
This is done because many pages are not mobile optimized, and break
(or at least look bad) when rendered at a small viewport width. This
virtual viewport is a way to make non-mobile-optimized sites in
general look better on narrow screen devices.
In order to prevent this, this meta tag is used:
<meta name="viewport" content="width=device-width, initial-scale=1">
This sets the viewport to be fixed to the device width.
An explanation of layout viewport and visual viewport can be found here.
I have read here and here that one should use
<meta name="viewport" content="width=device-width,initial-scale=1.0">
if one wants to optimize a webpage for mobile devices.
I would like to understand the consequences of this on the iphone4 in landscape mode. I would think that the following happens:
width=device-width
The device width of the iphone4 is 320px in landscape (see here) even though the iphone 4 has a screen-width of 480px in landscape mode. So the layout viewport is set to 320px.
initial-scale=1.0 This sets 1 CSS pixel to 1 device pixel (see here). Now since the iphone4 has a width of 480 device pixel, this implies for me that the visual viewport is 480px wide.
Thus, the layout viewport is set to 320px and the visual viewport to 480px. Doesn't that imply that the webpage is only shown on the first 320 px of the visual viewport and the remaing 160px are left blank?
To give a more concrete example: Consider the following webpage
<!DOCTYPE html >
<html >
<head>
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
</head>
<body>
<div style='background-color:red;width:100%'>Test</div>
</body>
</html>
then in my understanding, this should only fill the screen of the iphone4 in landscape to 320/480=66,66% with red, because the layout viewport would get the length of 320px and since the div-size is relative to the viewport, width:100% is the same as width:320 px, see here:
the CSS layout, especially percentual widths, are calculated relative
to the layout viewport
I am assuming that I am wrong and that the iphone4 will probably display the above page in landscape with 100% red - but why? Have I misunderstood something?
Remark: I found this question Can I have more than 320px content in an iPhone, using viewport tag with device-width and initial-scale = 1? which is closly related to my question but with no answer.
Mozilla's documentation of the viewport meta tag explains this behavior fairly well (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">
By extension, if width=device-width resolves to 320 but the screen is 480 pixels wide, the browser will also expand the layout viewport to 480.
Also from the same document:
Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape.
I think that behavior has changed somewhat in recent versions of iOS, but it can be a confounding factor in figuring out what is going on, as on some devices the layout viewport will sometimes be different when a page is loaded in landscape vs. when the page is loaded in portrait and then rotated to landscape.
Mozilla goes on to say:
If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
I'm not a fan of this technique; I think the cure is worse than the disease in most cases.
It is because it is rotating page rendered in portrait mode. You will have to redraw page. Here is similar question .
I think that the problem you have is confusing the device-width and screen/browser resolution.
as in the example you post:
These pixels have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.
In other words, width/height mirrors the values of document. documentElement. clientWidth/Height, while device-width/height mirrors the values of screen.width/height. (They actually do so in all browsers, even if the mirrored values are incorrect.)
they are retina display and the difference is only in bigger pixel rendering from the iphone, so the browser will rendere full-screen even with 320px device-width in landscape. the big problem with iphone is that this difference don't change between portrait/landscape.
and
You can set the layout viewport’s width to any dimension you want, including device-width. That last one takes screen.width (in device pixels) as its reference and resizes the layout viewport accordingly.
where the device pixel (The screen) is different from visual viewport
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
there device-width will have always 100% screen width.
<meta name="viewport" content="width=320px;initial-scale=1.0" />
there you should test if there are no changes on iphone or the DIV will extend out/gap of the screen in landscape
i think this source is correct only using media-query with device-width (not visible on iphone), because if you use normal media query you can see that the effective pixel-ratio of the browser rendering changes from 320px to 480px
max-width is the width of the target display area, e.g. the browser; max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.
If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.
I have div which has height and width of 15360px respectively which is the designated area to drag my elements around. It is working fine on the desktops and laptops where the scroll bars will appear.
I have been using the media queries to work it on IPAD too, but when the site is viwed in IPAD the page gets shrinks because of the particular div which has the width and height of 15360px.
Can anyone suggest what can be done to make the Mammoth div to fit in IPAD so that page looks fine.
Any help is appreciated.
Thanks in Advance
You should play around with the viewport meta tag. See the documentation on MDN here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag.
I think you're looking for no scaling and fixed width instead of device-width.
I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
I'm working on this website and I can't figure out how to fix the problem.
if you use a fullscreen browser window you will see it perfectly (any major browser) but if the window is smaller, it shows the horizontal scrollbar plus cuts the website on the right of around 50px.
I can't change the design to make it more easy to do.
here's the link, you can see both html and css
http://www.ircm.comunicazioneimmagine.eu/
Using fixed size layout will cause problems with different screen resolutions. You should use fluid layouts to resolve the problem.
Fluid Layout Guide
Responsive Design
If you don't want to use fluid layouts.
Put all the content into a div with margin: 0 auto and add text-align: center to the body (IE explorer compatible). Choose a background that looks nice with the page and you're done.
But if the screen resolution is less than actual page size there won't be any solution but resizing the page manually.
the horizontal scroll bar is there cause your page exceeds the innerheight of the browser... my current res is 1920x1080 and I cannot see the bottom of the page. Perhaps try reducing the size of the big IRCM at the bottom.