Response Pages for Mobile Devices

[jwolach]

Has anyone written custom response pages that can detect a Mobile browser and changes the HTML format to fit the browser?

[mjacobsen]

If you customize the block page and put this in the "styles" section, it should look better:

@media only screen and (max-device-width: 400px) {
     body {
          width: 82%;
     }
     #content {
          float: none;
          width: 100%;
          font-size: 300%;
     }
     h1 {
          font-size: 180%;
     }
}

Mike

[jwolach]

Thanks Mike!!  It works fine, I had to tweak the font size percentages a bit for the iPhone.  However, in the default GlobalProtect Login Response Page there's the pan_form/ variable.  Is there a way to increase the font size for those form items? I tried putting the <h1> class tags around the <pan_form/> tag but, it doesn't change the size of the form items.

Kind regards,

Jeff

[mjacobsen · Accepted solution]

I think I found a better approach:

<meta name="viewport" content="initial-scale=1.0">
<style>
  #content {
    border:3px solid#aaa;
    background-color:#fff;
    margin:1.5em;
    padding:1.5em;
    font-family:Tahoma,Helvetica,Arial,sans-serif;
    font-size:1em;
  }
  h1 {
    font-size:1.3em;
    font-weight:bold;
    color:#196390;
  }
  b {
    font-weight:normal;
    color:#196390;
  }
</style>

This works better for various screen sizes and also seemed to help with the GlobalProtect login page.

[jwolach]

Mike,

It works like a charm!!!  Thank you very much!

On another note, do you know the name of the image file that gets stored in the /images folder on the PANW for the Custom Logo for the Main UI?

Kind regards,

Jeff