Un do Viewport

I’m not sure that’s a problem, who really knows how to change or set the viewport on their mobile or desktop device? Even if they could, what reason would they have to not have full screen? When I change my browser on my desktop from full screen to not, am I really changing the viewport?

Uhm, I do this every single day. Split screen code and Netflix. ANY situation at all where multiple apps need to be open on your screen at once. Windows even makes it easy to split screen. They custom build the functionality in.

And yes you are changing the viewport size if you do that.

Wouldn’t a user of split screen expect to lose some of the apearance of a web page?

I’d be quite annoyed. I could expect that for mobile size maybe, but not split screen.

Split screen for desktop? Doesn’t it just shrink it? I guess it changes the viewport to shrink it ?

I’m really confused as to what your problem is here.

At the moment, your site has three columns, which expand to a maximum width of 972px, irrespective of how much wider than that the monitor may be. Your CSS limits the total size to a maximum of 972px.

At viewport widths of 762px and below, the three-column layout changes to a single column layout. This happens on any device, and is dependent only on the size of the viewport.

Which part of this behaviour are you unhappy with, and in what wado you want to change it?

1 Like

At the moment, your site has three columns, which expand to a maximum width of 972px, -
No that’s not right. Three colmns from 762 to 972, otherwise only one column.

I would like three columns for desktop and lose the side columns in mobile (and I gues split screen too) because mobile has smaller screen size than desktop. What’s happening is the code to make mobile work is removing the columns for desktop (non split desktop). Any desktop screen 17" and over (w/o using split screen) can easily handle the 3 columns. The code for one column was done only for the purpose of handling the small screens of mobile, but it’s removing the columns for 762px and below for desktop. 762px on 17" desktop is still pretty wide, far wide than on mobile. 972 on a 17" screen for my site is 17". 762 is about 3/4ths 972. So 3/4th 17" is 12.75 inches. Most mobile devices aren’t 12 inches wide (exceptions I guess would be tablets)… Well maybe that’s it. 762 is too wide. What is the max width for phones?

Thanks TB

You seem to be under some misconception that desktop browsers can’t be narrowed as small as mobiles but that is not true as you can close the browser window down as small as you like (although you wouldn’t usually do this unless you were trying t fit a number of applications side by side on your monitor).

The only thing you need to be concerned with is the available pixel width for your design. Forget about monitors, devices, laptops, ipads, tablets, mobiles etc as they all have one thing in common; they all have a screen width in which to show their display (and this width changes in landscape of course). We are not talking about device width but the width of the devices viewport which is not the same thing.

As I said above 762px is the same whether it is on a desktop or not. It matters not a jot what device or monitor you are using as the 762px will still be 762px of your design whether on a 27" monitor or a 14" monitor.

Here is a screenshot of your page at 762px just before the columns disappear.

As you can see the middle column is just about readable but if the viewport were to get any smaller then the middle column would be so narrow that it would look really silly and be awkward to read.

I’ve changed your media query by 200px smaller so that you can see what happens to the middle column.

As you can see the middle column is now unreadable so why would you wnat desktop users to see that if they had used split screen mode or just resized the browser to make room for other stuff on the screen. It doesn’t matter what monitor or what device the display will still be like my screenshot above.

That’s why we all suggest that you accommodate all devices by using the media queries to go to one column when the design no longer fits nicely as a 3 column. If you think that the display above is ok for desktop then it follows that it would be ok for mobile/tablet at the same size also because we still talking about the width of the design.

You seem to be creating a problem that doesn’t exist :smile:

In answer to one of your questions you can actually detect device-widths by using the device-width media query rather than min or max width but you will need hundreds of them to cater for all devices.

So to re-iterate:

  1. Forget about devices.

  2. Open and close the browser window on your desktop (no matter what monitor or resolution you are running) and when the design no longer fits nicely any more then throw in a media query and fix it. In that way you have automatically catered for all devices.

1 Like

On my desktop, at 770px, the site looks like this:

That middle column is quite narrow. Any narrower and IMHO it will be hard to read - not to mention the amount of scrolling required, given the length of your page.

Just change the size at which the media queries kick in, and see what the effect looks like on desktop. Set it to a size you’re happy with. It’s your site.

[quote=“Chris77, post:47, topic:195800”]
Any desktop screen 17" and over (w/o using split screen) can easily handle the 3 columns. The code for one column was done only for the purpose of handling the small screens of mobile, but it’s removing the columns for 762px and below for desktop. 762px on 17" desktop is still pretty wide, far wide than on mobile.
[/quote]I’m still confused by this. Are you changing the resolution of your screen, rather than resizing the viewport? It’s highly unlikely that anybody with normal vision will have a 17" monitor set to 762 px (mine is 1240px), and the only way they’ll be viewing the narrow version of the site will be if they’re using split screen/reduced browser width, for whatever reason.

kittehs!

On my desktop there’s no left and right colums like you see in the second image that has the center column very narrow from making the browser narrow. Any idea why? This is what I see at about 3/4 FF 39 browser on my computer. Same thing for Safari. Show no side columns starting at about half in IE 8. At the library in IE shows no columns at about half. I don’t mind those columns not showing at naroow browser width but 3/4 is too much and my desktop is set at 1152 by 864 pixels so the pixels are fairly close together on my monitor.

On this site it says
With the help of CSS3 and mediaqueries you can change the layout of your website based on the detected screen size of the device (be it a computer screen, tablet, smartphone,…)

Here’s the samlpe code they give:
/+ -------------- 1 all screens (default) ------------- +/ #mydiv {font-size:12px; background-color:#9f0}

/+ -------------- 2 large screen (1440 pixels or more) ------------- +/
@media screen and (min-width: 1440px)
{#mydiv{font-size:18px; background-color:#F90}}

/+ -------------- 3 ipad landscape ------------- +/
@media screen and (min-device-width: 481px and max-device-width:1024px) and (orientation:landscape)
{#mydiv{font-size:12px; background-color:#f00}}

/+ -------------- 4 ipad portrait ------------- +/
@media screen and (min-device-width: 481px) and (max-device-width:1024px) and (orientation:portrait)
{#mydiv{font-size:12px; background-color:#090}}

/+ -------------- 5 iphone ------------- +/
@media screen and (min-width: 321px) and (max-device-width:488px)
{#mydiv{font-size:14px; background-color:#06c}}

/+ -------------- 6 iphone ------------- +/
@media screen and (max-device-width:320px)
{#mydiv{font-size:14px; background-color:#636}}

@media queries don’t work in IE8, but that browser is pretty ancient now. Presumably you are also talking about Safari for Windows, which is way out of date and should not be used any more. There’s a whole new world of Web experience just waiting for you when you decide to get a modern browser. :slight_smile:

Those kinds of media queries are a bit misleading. Their aim is to chase down various devices, which is an impossible battle. As said above, focus your @media rules on the actual breakpoints for your layout.

Because, as Paul said in message #48:

That means he changed this line:

@media screen and (max-width:762px)
to this:
@media screen and (max-width:562px)

for testing purposes so you can see when/how media queries affect the page.

 

The page with the very specific media queries that you quoted shows a copyright of 2012. It’s out of date. Look around and you will see that there are many more devices that just the i-products. To cater to each one would be impossible… more are added every year and some are discontinued. It is foolish to chase device widths and orientations like that.

I do not know what 3/4 or “half” are referring to. Would you be kind enough to explain what you mean?

It sounds to me like you may be scaling the video card and changing the apparent resolution of your monitor. You should be testing the media queries with the browser in NON-maximized mode by dragging the edge of the browser window narrower and wider as @Paul described in message #48.

I kept on my thought “762 is too wide.” for the last couple of hours. I found I could make the browser drop the side columns at a narrower browser width. I was looking at this page
http://mydevice.io/devices/
and chose 479px (479 or less drop side columns, maybe I should use 481px). Whichever, the change to 479 (that probably should be 481) makes the desktop view look better (don’t drop side columns until the center column is pretty narrow. When the side columns disappear many viewers won’t know they exist, like when the site is opened in a narroweed desktop browser (or anything pretty narrow for that matter). I’m glad I needed only to make that one change.to improve the problem. They really need to outlaw narrow screens so people don’t have this problem -)

Thanks much,

Chris

This site helps a lot

http://www.mobilephoneemulator.com/

because it has a drop down on the right that lists mobiles with their dimensions, so you can choose 480 (or even 320) width and see what it looks like.

No, you aren’t listening. :smile:

At 481px your middle column will be unusable on thousands of devices. Please look at the screenshot I sent where I set the media query to 582px for testing. That is what the page will look like on all devices that have 583 px screen width available. If you now narrow that down to 481px you will probably get two words a line in the middle column. That is complete nonsense.

Forget about 3/4 of your monitor that is nonsense also. All you are interested in is the width that the design needs to change. Nothing else matters. That width will be the same for all devices no matter the resolution or monitor or device.

I don’t think I can explain it any better :smile:

1 Like

Yes but that’s no different from just closing your browser window to that width. They are not emulators as such. Use Chrome and open the chrome tools and there is a mobile viewer already built in. Again it is not a real emulator in the sense that the ios SDK is real simulator but gives you the basic view of a device.

If you have chrome tools open while you open and close your browser window the dimensions of the window are displayed in the top right corner so it becomes easy to decide where your media query breakpoints are needed.

As others have said, 3/4 or 1/2 a monitor has no meaning. I suggest you download an on-screen ruler (if you don’t already have one), so that you can see exactly what is happening and when. You will see that the change from three columns to one occurs at the pixel dimension which you set in your media query, whether that is on a 15" monitor or a 27" monitor.

With your current media queries, this is how it looks on my desktop (and will look on any other device) at 600px:

and at 485px:

If you think those displays are usable and acceptable, then that’s your decision, but I would have to disagree most strongly.

I’m thinking it would be more work, but might be worth it, if instead of going from 3 straight away to 1, to go 3 to 2 to 1

Congratulations you have just made the site unusable on thousands of devices.:wink:

Here is a screenshot from an iphone4 in landscape.

Of course the final decision is up to you and if that’s what you want a lot of people to see then that’s your choice. We can only offer best advice practices but ultimately the decision is yours.

Yes that might be an option depending on the structure.

3 Likes