0

I'm trying to make my web page responsive. I am aware of media queries however, when using a device like Samsung Galaxy Note 4 that has a really high resolution, the web page ends up looking a lot like the desktop version.

I know there's a way to do it as when i tried visiting a known responsive website like alibaba, it redirected me to the m.alibaba version of it. Whats the qualifier here? Because evidently its not the resolution.

Thanks for taking the time.

Return-1
  • 1,953
  • 1
  • 12
  • 44

2 Answers2

1

You can check the actual pixel ratio with -webkit-min-device-pixel-ratio in media queries. For example, the Galaxy S4 and onwards has a -webkit-device-pixel-ratio of 4, whereas the S3 only has a ratio of 3. Targeting based on this will allow you to present different mobile views per device.

Here's an example that will only target an S3:

@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {
}

You can find a complete list of devices and their relevant media queries on this CSS Tricks page.

Remember to include a META tag in your <head> section that allows for scaling:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

The actual redirection you're talking about can't be handled via CSS, and is typically handled via JavaScript.

This can be (crudely) done simply with a check against window.screen.width:

if (window.screen.width < 1000) {
  window.location = 'm.mysite.com';
}

Though it's much safer to check against the user agent:

var isMobile = function() {
  console.log("Navigator: " + navigator.userAgent);
  return /(iphone|ipod|ipad|android|blackberry|windows ce|palm|symbian)/i.test(navigator.userAgent);
};

Hope this helps! :)

Obsidian Age
  • 36,816
  • 9
  • 39
  • 58
  • thanks a lot. yeah i was aware of how to redirect but not what the qualifier was for doing so. I guess its a matter of fine tuning. Its a little odd however how the qualifier for mobile in JS is the user agent but in css it all about ratio and resolution. Seems a little inconsistent. Is there a way to check for user agent on media queries in css? Thanks a lot! – Return-1 Oct 12 '17 at 20:43
  • 1
    As far as I'm aware, media queries can't check against user agents specifically. However, considering all mobile devices both support JavaScript and have it enabled by default, I'd reckon it's a fairly safe bet to handle the redirection through it. Don't forget you can also check against the specific [**browser**](https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) that the mobile device is using if need be! Though considering you can target against any given device in raw CSS, you shouldn't really need a redirect in the first place :) – Obsidian Age Oct 12 '17 at 20:50
0

You could also create a separate style page and use this.

<link rel="stylesheet" media="screen and (min-device-width: Device Width)" href="css.css">
Dawson Hudson
  • 44
  • 2