Question

i’m building a restaurant’s website, and have their menus loading as images in modals via TW Bootstrap. the code looks like this:

          <div id="menu" class="modal hide fade in" style="display: none; ">
              <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
              </div>
              <div class="modal-body">
                <img src="assets/menus/brunch.jpg">
              </div>
          </div>
          <a data-toggle="modal" href="#menu" >BRUNCH</a></p>

this works fine on desktop browsers, but in mobile browsers, the size of the images makes scrolling and zooming kind of awkward. the client wants to scrap the modal in mobile and just load the image in a new page when the user clicks on a menu link.

i’ve read a bunch of stuff about media queries and javascript browser detection, but i feel like what i’m trying to do is on a wayyy smaller scale. what’s the easiest, most pain-free way to do this?

Answer 1

Have your web server detect if the device is a mobile browser or not. If it appears to be a mobile device, redirect to a mobile version of the page that has the image inline instead of in a modal (and, offer a link at the bottom to the full version of the site in case they don’t want to see the mobile content).