CODEWITHSUNDEEP
htmlcssresponsive-designtablet
JustAPoring
JustAPoring

Reputation: 258

Make website scale up without using percentages

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.

Upvotes: 0

Views: 826

Answers (2)

Christoph
Christoph

Reputation: 51201

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.

Upvotes: 2

adhocgeek
adhocgeek

Reputation: 1457

You probably want to investigate media queries and alter the CSS slightly for tablets : http://www.w3.org/TR/css3-mediaqueries/

Upvotes: 1

Related Questions