0

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.

JustAPoring
  • 258
  • 1
  • 12
  • 2
    Something like [this](http://stackoverflow.com/questions/3597977/how-can-i-get-my-website-to-be-zoomed-out-by-default-on-mobile-phones)? Pretty device specific though – Nathan Kot Nov 19 '12 at 09:33
  • @NathanKot possibly. As I clarified in my edit, is there a way to target only portrait-tablets in that way? Simply setting `` would mess up both mobile and tablet-landscape. – JustAPoring Nov 19 '12 at 09:35
  • Also, note that while my test-phone seems to respond to `content="width=745"`, messing up the design on phones, my tablet doesn't respond to it at all. – JustAPoring Nov 19 '12 at 09:42

2 Answers2

2

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.

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • I've looked at it and from what I can see, this will cause a lot more work and issues than my solution. It doesn't work completely (cuts of the top pixels of the page) but that is probably fixable. Also, old IE's can't do media queries, so that is kind of redundant :) I do appreciate your effort, but instead, I took your advice and rather enabled user zoom-in again in my own solution by only limiting the lower end. I shall accept your answer for your time and effort, since I kind of want to put this question behind me. – JustAPoring Nov 19 '12 at 14:36
1

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

adhocgeek
  • 1,437
  • 1
  • 16
  • 30
  • -1 For not reading my question properly. As I already said, the design is quite set. I cannot simply change the values, and everything already works with media queries. The design for tablets is 745px wide. The desktop one is wider. – JustAPoring Nov 19 '12 at 09:30
  • You're asking for a CSS only solution, yet claim you can't alter the CSS? Media queries are what you need to use. If you can't alter the design then there is literally nothing you can do. – adhocgeek Nov 19 '12 at 09:43
  • I can alter the css. I cannot completely change the design which is based on pixel values for a width of 745px to a fluid design. I am not the one who designed it, I am merely the one implementing the design, and, frankly, the design was not created with fluid values in mind, which might not be optimal for tablets, but it is not my creation. Please, read my question properly before jumping to conclusions this fast. – JustAPoring Nov 19 '12 at 09:46
  • I did read your question properly. It's up to you or your designer to modify the design for tablets. If they're set on it being 745px wide then that's how wide it will be on tablets and it appearing with a border is HOW IT SHOULD BE. Either change the design yourself, push it back to the designer or put up with it, that's your job as the front-end developer. – adhocgeek Nov 19 '12 at 09:50
  • @alro I think your rude tone really doesn't fit here. You asked a vague question and got a perfectly valid answer. The downvote is completely inappropriate... if you are treating people like that you won't get any nice answers... – Christoph Nov 19 '12 at 10:40
  • @Christoph What part of my response is rude? The fact that I downvoted an answer which completely missed the point of my question? I clearly defined that I am forced to use those fixed pixel values, and cannot use percentage based values, eg. a fluid approach. It is not something I can decide, but that the designer defined such and the customer wants it to be as the designer designed it. Getting a generic "Go look up media queries" which does not answer my question, ignores what I actually asked and, in my opinion rudely, assumes zero knowledge on my side is not really helpful. – JustAPoring Nov 19 '12 at 12:16
  • 1
    You insinuated twice that adhocgeek didn't read your question...I would find this rather insulting. In fact you didn't mention media queries and also didn't provide code samples and made no further statements of what you tried so one could only make assumptions about your rather poorly asked question. – Christoph Nov 19 '12 at 12:29
  • @Christoph I concluded that he did not do so because I, in my question, stated, that 1. My design width was 745px and I could not change that and 2. that I could not resort to any % based values. I'm not quite sure how you interpret his answer, but how exactly would "use media queries" help in that case? What should one do with media queries? I also felt that by stating that I am applying responsive design and that my tablet design has X width, I implied that I would be using media queries - how else would one achieve responsive design? It might be poorly said but I did provide the information – JustAPoring Nov 19 '12 at 12:49
  • @alro well I guess it was a simply misunderstanding with some overreaction on both sides included. I will post an answer that hopefully is useful to you. – Christoph Nov 19 '12 at 13:24