Question

Currently I am creating a responsive website. The problem I currently have is that the design for the responsive layout( which was not designed by me, I am merely the one implementing the design ) has a fixed width of 745px. That is, of course, not the width of most, if any, tablets.

For example, on an iPad with a width of 768px, there will be a margin of 10px on each side. That looks not that great, and is also not how the designer inteded it.

Is there a way to make the website upscale on a mobile/tablet device without resorting to percentage values? Several parts of the design rely on fixed pixel values, and converting the entire design to percentage values is more or less impossible.

If, for example, I just zoom in slightly on the iPad, it looks exactly as intended. So if I had the option to force tablet devices to zoom to 745px width and then stay there fixed, that would be exactly what I need. After a bit of googling, however, I haven’t found anything yet.

A CSS/HTML-only solution would be preferred, but a JavaScript is fine too.

To clarify a bit more: The target for this solution would only be Tablet in Portrait mode. Smartphones and Tablets in Landscape should be untouched.

Answer 1

You could include zoom into your according mediaqueries:

You can use transform:scale(); (with according browser-prefixes) and for IE zoom:<x>, resulting in something like this:

@your according media-query{
      -webkit-transform: scale(1.1);  /* Safari 3.1+, Chrome */ 
         -moz-transform: scale(1.1);  /* Firefox 3.5+ */
          -ms-transform: scale(1.1);  /* IE9+ */
           -o-transform: scale(1.1);  /* Opera 10.50+ */
              transform: scale(1.1);
                   zoom: 1.1;         /* old IEs*/
} 

This should have a rather good support in the browsers and doesn’t mess with the UX by disabling the user to zoom as they wish to (like your javascript solution woud do).

Apparently this might need some javascript adjustments to fit the exact measurements of the viewport of the targeted devices.