cssmobileresponsive-design

How can I detect if a user is browsing my site from a mobile phone using CSS?

I am designing a web site which will allow users to search for an item to display information about it, or select two items using dropdown menus and compare the two.

What I want to do is have two separate style sheets that can be loaded; one for mobile users, and one for all other users. I have tried searching for possible solutions, but none seem to match exactly what I want to do. I'm worried that if I select a stylesheet based on screen resolution for example, users on high end smartphones with 1080p displays will get the desktop version of the site. I want to avoid this by only giving the mobile site to mobile users, regardless of screen resolution. If possible, I would prefer a CSS only solution for all mobile OS's, just in case a user has their JavaScript disabled.

Solution

  • Can you please try this

    Below is the way to find whether the user on PC or on mobile:

    <?php

/* Mobile detection */
function is_mobile() {
  $userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
  return strpos($userAgent, 'mobile');
}

/* Does the UA string indicate this is a mobile? */
if(!is_mobile()){
  $is_mobile = 'its pc';
} else {
  $is_mobile = 'Yes Mobile';
}

  echo '<pre>'; print_r($is_mobile);

?>

    To overcome the design issue you can use bootstrap