Using server side to detect mobile agent

[durangod]

Hi, 

I know this is a userside (probably js and css) job but i dont have the js code for this.  Is it ok to use server side php code for this purpose.

I need to show a smaller version of the image if its mobile and the css for this script is minified and uses php functions to decide the css values, i dont want to mess with all that core code stuff.   

I am making some small image changes to the mantis bug tracker script. So i just added this in their config file.

Code: [Select]

//check for android
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(strpos($ua,'android') !== false && strpos($ua,'mobile') !== false)
{
    // smaller mobile size
    $g_logo_image  = 'images/mobile_logo.png';
   
}else{
   
      //full size web version
      $g_logo_image = 'images/full_logo.png';
     
     }


Thanks

[coothead]

Hi there durangod,

this can be done simply with CSS and will work for all devices.

HTML

Code: [Select]


 <h1>Image example</h1>

 <img src="https://dummyimage.com/960x400/000/fff" alt="image example">


CSS

Code: [Select]


body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5  arial, helvetica, sans-serif;
 }
h1 {
   font-size: 1.5em;
   font-weight: normal;
   text-align: center;
 }
img {
   display: block;
   width: 98%;
   max-width: 60em;
   margin: auto;
 }


coothead

[durangod]

thanks coothead and hello.  the problem is that i cant figure out their css file structure and how its parsed.  So many css files with both name.css and name.min.css and not same code.  i tried some small changes for media n no change.

Thats why doing so serverside seemed like the solution.

[coothead]

Hi there durangod,

do you have access to the css files?

coothead

[durangod]

Yes sir,

 but the min and the normal version dont have the same code in them and there are lots of dif css files.   They suggest making changes to the default css so i changed something obvious to test and nothing changed, i even cleared cache and no changes.   In the console it has nothing for the image other than center so its generated elswhere.   I did a search of the script and it seems its done from a layout api php file.   That is why i went  when the simple php code

Its another one of those BS framework scripts i guess.      

[coothead]

Hi there Durangod,

It's another one of those BS framework scripts I guess.

Please tell me that you are not using "Bootstrap".

coothead

[durangod]

Im not, they are lol yeppers...

mantisbt.org 

at first i was modding osticket as a bug tracker but as soon as i saw cellspacing and cellpadding inline css i said screw this its too old.

[GrumpyYoungMan]

Im not, they are lol yeppers...

mantisbt.org 

at first i was modding osticket as a bug tracker but as soon as i saw cellspacing and cellpadding inline css i said screw this its too old.

Update the “skin”?

[durangod]

Update the “skin”?

I made a copy of two of the min files.  ace.min.css  and ace-skins.min.css  and saved the originals as _old  i found a few things that worked so maybe ill have some luck..... thanks :0

[durangod]

Not perfect but i just wanted to change enough to make it easier on my eyes, black and white is better and darker blue is better but some of the colors i could not change as they were part of bootcrap....   Also ill leave the php for the logo until i figure out how its done exactly.   

This is from their demo




And this after my small changes, it will do visually for now....  Now i just have to tweak some plugins a bit.   

[Jason Knight]

Not server-side code's job. This is the job of the picture tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

NOT that you should be thinking desktop / mobile. You should be thinking screen size.

Code: [Select]

<picture>
  <source srcset="images/mobile_logo.png" media="(max-width: 800px)">
  <img src="images/full_logo.png" alt="logo">
</picture>

Or at least if I had to specify the image in the markup because there's multiples of them (like user avatars in a list) that's how I'd go about it.

One of the few times I'd have a px media query, since we're talking about raster images. If that was SVG I'd be using EM... though if you're dynamically scaling the raster image within limits or to EM/REM, use EM/REM. Basically the query should match however you're sizing the image.