CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Using server side to detect mobile agent  (Read 72 times)

durangod

  • Sr. Member
  • ****
  • Posts: 407
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Using server side to detect mobile agent
« on: 25 Mar 2024, 09:35:09 am »
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
« Last Edit: 25 Mar 2024, 09:38:03 am by durangod »

coothead

  • Sr. Member
  • ****
  • Posts: 391
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: Using server side to detect mobile agent
« Reply #1 on: 25 Mar 2024, 10:30:14 am »
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
~ the original bald headed old fart ~

durangod

  • Sr. Member
  • ****
  • Posts: 407
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Using server side to detect mobile agent
« Reply #2 on: 25 Mar 2024, 11:12:14 am »
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

  • Sr. Member
  • ****
  • Posts: 391
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: Using server side to detect mobile agent
« Reply #3 on: 25 Mar 2024, 12:23:17 pm »
Hi there durangod,

do you have access to the css files?

coothead
~ the original bald headed old fart ~

durangod

  • Sr. Member
  • ****
  • Posts: 407
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Using server side to detect mobile agent
« Reply #4 on: 25 Mar 2024, 03:52:42 pm »
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

  • Sr. Member
  • ****
  • Posts: 391
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: Using server side to detect mobile agent
« Reply #5 on: 25 Mar 2024, 04:14:56 pm »
Hi there Durangod,

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

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

coothead
~ the original bald headed old fart ~

durangod

  • Sr. Member
  • ****
  • Posts: 407
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Using server side to detect mobile agent
« Reply #6 on: 25 Mar 2024, 04:37:02 pm »
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.
« Last Edit: 25 Mar 2024, 04:38:38 pm by durangod »

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 788
  • Karma: +8/-0
    • Grumpy Young Man
Re: Using server side to detect mobile agent
« Reply #7 on: 25 Mar 2024, 04:56:39 pm »
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”?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

durangod

  • Sr. Member
  • ****
  • Posts: 407
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Using server side to detect mobile agent
« Reply #8 on: 25 Mar 2024, 05:16:06 pm »
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

  • Sr. Member
  • ****
  • Posts: 407
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Using server side to detect mobile agent
« Reply #9 on: 25 Mar 2024, 08:16:30 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 1052
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Using server side to detect mobile agent
« Reply #10 on: 25 Mar 2024, 11:36:01 pm »
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.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

 

SMF spam blocked by CleanTalk

Advertisement