How do I get my web pages to scale to different screen sizes?

jerrysp · 10-05-2012, 08:44 PM

How do I get my web pages to appear in full screen on larger and smaller screen sizes?

COBOLdinosaur · 10-05-2012, 11:03 PM

Set all your dimensions and positioning in percentages. You may have to allow a little extra margin in some cases. That is about the most I can give you without seeing the site.

jerrysp · 10-08-2012, 03:54 AM

How are images reduced as they are when viewing a web page on an ipad?

waxdoc · 10-09-2012, 01:12 AM

See http://www.josephdenaro.com, wherein the aspect-ratio of the images were the same so width: ___% (with min-width: __px; and max-width: __px

was possible.

======
OOPS! Missed "iPad." For mobile devices, used script to re-direct to indexmobile.htm version with samller animated GiF

LearningCoder · 10-09-2012, 09:10 AM

What about setting elements with em's?

What are the downsides of using em's?

Regards,

LC.

jerrysp · 10-11-2012, 10:39 PM

Example: Try http://www.foxnews.com/ on a computer.....then on an iphone.

On the iphone the web page is scaled down and content is rearranged - how is that done? I get overlap.

COBOLdinosaur · 10-12-2012, 03:52 PM

They detect the device server side and deliver a page tailored to the device. The page is in no way responsive real time. If you pull up the page in a browser and then re-size down it gives you scrollbars instead of resizing.

A truly responsive page adjust real time, and you do that either by using percentages or scripting off of the onload and onresize events.

Both methods have their own problems.