Media Query for PC

Question

Hello, basically I want to make two models of my site, one for mobile devices and the other for computers. I would like to make a CSS code that is read only by PC browsers, but if I use for example :

@media all and (min-width: 1000px) and (max-width: 1700px) {}

I would select several Pcs but would also include iPads, Google Nexus 10, and several others. In the case of my site, it would be a problem if the two types of devices carried the same code.

There is a way to select only computers ?

Answer 1

As far as I know, there is no way to know if the user is accessing the site through a desktop using only CSS...you can achieve this result using a little Javascript to detect the user’s device:

var ua = navigator.userAgent;

Then, you can work with the returned values and redirect the user to a specific mobile version, if the user is accessing your site from a mobile device, or to the version for destkops, if he is accessing from a desktop.

Answer 2

When you use MIN-WIDTH and MAX-WIDTH it refers to the width of the browser you are currently using based on the resolution of the device, that is, the problem is generated because even smaller devices like an iphone for example have the same resolution as common monitors.

The best alternative is to use the DEVICE WIDTH which refers to the width of the screen that the device appears to have (EX: 1024 of a 1024X768 screen) ie you do not work with resolutions, you work with screen sizes.

To make the media want to be based on this it is necessary to use the metatag VIEWPORT that makes the resolution the same size as the screen of the device, or almost that. It makes the device use the width it appears to have and not its resolution.

More about the viewport here: Manipulating the Viewport

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

NOTE: You can modify your need by changing the value of the attributes:

• width - Set a width for the viewport. Values can be in PX or "device-width", which automatically determines a value equal to device screen width.

• height - Set a height for the viewport. Values can be in PX or "device-height", which automatically determines a value equal to height of device screen.

• initial-Scale - Sets the viewport’s initial scale.

• user-Scalable - Sets the possibility for the user to "zoom in" a certain place of the screen. It is activated when the user hits two times with your finger in a place on the screen.

With this, your code will be based on the width of the device. An iphone has a much smaller width than a 24-inch monitor", that is, it will not generate the problem since monitors will always be larger than mobile devices and the media querie will use its width as a base.

I consider this the most viable and recommended alternative, since devices with different screen sizes carry different CSS rules, IE, a mobile device will not display specific things for desktops and vice versa.

Another alternative is to work with device width directly in the media queries but this is a bit laborious since it should add max-device-width, min-device-width in each media querie.

EX:

@media only screen and (max-device-width: 1024px) { ...