[Webinar] Streamline your web hosting managementRegister Today


Adapting fixed-width website CSS to fit on an iPad screen

Posted on 2014-01-31
Medium Priority
Last Modified: 2014-02-03
I need to take this website:

…and make it fit nicely on iPad and other tablet devices. The site is built to a fixed width of 1048 pixels, and as such doesn't look right on those devices.

Many of the elements throughout are aligned with down-to-the-pixel precision, which makes this task a bit challenging. I tried messing around with width/height percentages on specific elements in my media queries… that gets me closer to the goal, but some things were still way off and I don't know that I can make everything align perfectly using that method.

I'm not asking for specific code here necessarily, but a strategy. Should I setup media queries that rework my CSS to some other fixed size? If so, is there a way that it can fill the page (especially the width) nicely no matter what the device's exact resolution? Or must I use percentages rather than a "less than 1048" fixed width approach, since I don't know exactly what the user's device resolution is? How does my "viewport" setting play into this (if at all)?

One example of something I tried: my header and footer I gave a 92% width, centered. That gave me a nice margin on either side, and by resizing the fonts, the header and footer looked good. But the three columns of content blocks on the home page… I could not get those to size exactly right using percentages. If you click one of those content blocks, you get another set of "pop-up" content that also needs to fit. Those two areas are where I got stuck.

Anyway, I just need to get from where I am now to a nice looking website on a tablet. The client is happy with the design, it just needs to fit. I think someone's better experience with this stuff is going to help me get to the goal a lot faster, and I'm hoping I can do this in a relatively painless way.

I would appreciate any advice. Thank you!
Question by:bbdesign
  • 3
  • 2
  • 2
LVL 58

Expert Comment

ID: 39825495
Having a quick look around I think you could easily use Bootstrap and make the site responsive without too much work
It would require removing any absolute sizing you have so bootstrap can resize the elements to the screen properly.
LVL 53

Accepted Solution

COBOLdinosaur earned 2000 total points
ID: 39827756
The HTML validator reports a couple of tagging errors that you should clean up.  Then instead of using percentages use viewport relative units in your CSS for all positioning and dimensioning; including margins padding and even font sizes.  

The viewport units vw and vh will adjust to the actual screen resolution unlike percentages which adjust to page size which may distort positioning.  The vw unit is equal to 1/100 of the viewport width and vh is equal to 1/100 of viewport height.

However when you have a site that is "...aligned with down-to-the-pixel precision..." you are guaranteed to have problems across devices because the act/ual size of pixels can vary by a substantial amount.  The standard of 96 pixels per inch is hacked in many mobile devices by using a "virtual inch" that is smaller than real inch.  That is done instead of using an alternate pixels per inch value to avoid scaling issues on the smaller screens. of pads and phones.  

If you use vh and vw, you get a rendering that basically miniaturizes the screen (this can make text difficult to read without zooming).  H/owever you might still want to use the media queries to bring in alternate versions of the graphics, because loading full size images and then scaling them to smaller version is inefficient.

The browser support matrix for viewport units is: http://caniuse.com/viewport-units


Author Comment

ID: 39828495
Since I originally wrote this question, I have been working on this using a combination of:

<meta name="viewport" content="width=device-width">

Plus: device width of 768 pixels

That seems to work, at least on iPad. I haven't tested other devices. This also allows me to simply redo my pixel math in my CSS media queries, and retain the pixel-level precision.

Is there a downside to doing it this way? Yes, I will need to create a new set for iPhone, but this seems to work OK for iPad.
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

LVL 58

Expert Comment

ID: 39828535
And what about all the other phones and tablets.
Heres a few to add to your list of screen size specific CSS

And that list is old, there are many more...

Author Comment

ID: 39829443
The outlook for this whole thing seems dire. I do subcontract work for an agency that designs down-the-the-pixel layouts. There are a multitude of devices with varying resolutions. Viewport Units have OK support on browsers, but not great (yet).

Seems the options are not great no matter what. But, I appreciate your input!
LVL 53

Expert Comment

ID: 39830113
>>>I do subcontract work for an agency that designs down-the-the-pixel layouts.

You either need to convince them that doing magazine page layout for modern media is an obsolete approach and if they want a high quality presentation for all of their clients they need to move to 21st century aproaches.

Either that or substantially raise the amount you are charging them because it is going to be very maintenance intensive.  Every time a new device, new version of a device, a new O/S, a new version of of an O/S, or new video chip comes on the market the layouts will have to be updated.

I will assume the agency has been around a while and is used to doing print media.  Mobile internet is a complete different world beca/use there is no fixed size for the pages, and even the size of pixels changes across different devices. Plus there is very little agreement on standards for mobile devices, and the manufacturers will fight it out for at least 10 years before standards emerge.


Author Comment

ID: 39830148
Thanks again!

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

612 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question