Hello, I basically want to make two models of my site, one for mobile devices and one for computers. I would like to make a code in CSS 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 multiple PCs but would also include iPads, Google Nexus 10, and several others. In the case of my site, it would be a problem if both types of devices loaded the same code.
Is there a way to select only computers?
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 the same devices smaller as an iphone for example have the same resolution of common monitors.
The best alternative is to use the DEVICE WIDTH that refers to the width of the screen that the device looks like (EX: 1024 of a 1024X768 screen) ie you do not work with resolutions, you work with screen sizes. p>
To make the media want to be based on this, it is necessary to use the VIEWPORT meta tag that makes the resolution the same as the screen of the device, or almost. It makes the device use the width it appears to have and not its resolution.
More about the viewport here: Manipulating 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 - Defines a width for the viewport. The values can be in PX or "device-width", which automatically determines a value equal to width of the device screen.
height - Defines a height for the viewport. The values can be in PX or "device-height", which automatically determines a value equal to height of the device screen.
With this, your code will be based on the width of the device. An iphone has a much smaller width than a 24 "monitor, that is, this will not generate the problem since monitors will always be larger than mobile devices and the media will use its width as its base.
Another alternative is to work with device width directly in the media queries, but this is a bit laborious since you should add max-device-width, min-device-width in every media querie.
EX:
@media only screen and (max-device-width: 1024px) { ...
As far as I know, you can not tell if the user is accessing the website through a desktop using CSS only ... you can achieve this result by using a bit of 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 mobile-specific version if the user is accessing your site from a mobile device or the version for destkops if they are accessing from a desktop.