How to give separate CSS to mobile devices?

A

account-12017-03-07 02:02:30

css

account-1, 2017-03-07 02:02:30

Tell me, how is this done today in general? I assume it's not just media queries? Because here's an example for you - it's just that when the viewport is resized, the page styles almost do not change. But if you click on the mobile device emulator in Chrome, everything changes absolutely (you need to refresh the page after that) - https://github.com/robbyrussell/oh-my-zsh

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

I

Ivan, 2017-03-07
@account-1

Clumsy method:
Take something like this . Depending on what it defines there, add the necessary css files (for example, insert a tag <style src="...">into <head>
Well, or you can simply write classes taking into account the root in <html>(see example).
Or here .

A

Andrey Fedorov, 2017-03-07
@aliencash

You need to specify the media parameter in the link meta tag.
Then styles will be loaded only on mobile devices.

K

KnightForce, 2017-03-07
@KnightForce

1) In one css, depending on the device, connect the one you need in @mediavia @import.
2) Just import and specify the media type.
htmlbook.ru/css/import

A

Alexander Varenikov, 2017-03-07
@warenikov

Heh, determine on the server the device from which you are viewing the site (analysis of headers from the device) and, depending on the device, give different or site templates, or simply connect different styles. For example, here's a function:

function isMobile(){
  $pda_patterns = array(
    'MIDP','FLY-','MMP','Mobile','MOT-',
    'Nokia','Obigo','Panasonic','PPC',
    'ReqwirelessWeb','Samsung','SEC-SGH',
    'Smartphone','SonyEricsson','Symbian',
    'WAP Browser','j2me','BREW', 'iPod', 'iPhone', 'Android'
  );
  $agent = $_SERVER['HTTP_USER_AGENT'];
  $user_agent = strtolower($agent);
  foreach($pda_patterns as $val){
    $val = strtolower($val);
    if(strpos($user_agent, $val) !== false){ return true; }
  }
  return true;
}