topic Response Pages for Mobile Devices in General Topics

Response Pages for Mobile Devices

jwolach — Wed, 04 Jun 2014 13:02:55 GMT

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

Re: Response Pages for Mobile Devices

mjacobsen — Wed, 04 Jun 2014 13:58:45 GMT

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

Re: Response Pages for Mobile Devices

jwolach — Wed, 04 Jun 2014 15:18:09 GMT

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

Re: Response Pages for Mobile Devices

mjacobsen — Thu, 05 Jun 2014 13:38:23 GMT

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.

Re: Response Pages for Mobile Devices

jwolach — Thu, 05 Jun 2014 14:06:20 GMT

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