PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Jul 23, 2019 11:43 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 8 posts ] 
Author Message
PostPosted: Tue Mar 13, 2012 9:27 am 
Offline
Forum Commoner

Joined: Fri Nov 04, 2011 9:04 am
Posts: 28
Hi there,

I have a couple of web pages created but when I am previewing them in internet browser, the web pages somehow not fitting the screen when I trying to display them with different pc.

Meaning to say, if I create web page using larger screen pc and the webpage cant be fully preview when using a smaller screen pc. How can I make my web pages fit the screen flexibly?


Top
 Profile  
 
PostPosted: Tue Mar 13, 2012 9:55 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
You could set the width to a percentage value rather than a static value, though this may introduce new challenges. Alternately, use a fixed width but scale it down a little.

_________________


Top
 Profile  
 
PostPosted: Tue Mar 13, 2012 11:03 am 
Offline
DevNet Master
User avatar

Joined: Sun Feb 15, 2009 12:08 pm
Posts: 2794
Location: .za
If you set the width of a element to 100% is will auto-fit the screen that you are viewing the page one; one of the issues you will face is to make sure that the width of any container doesn't exceed 100%. Any padding that you add is added to the width value so a padding-left value of 5% and a width value of 100% the total width of the page will be 105% and will give you the horizontal scrollbar of death at the bottom of the page

_________________
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering


Top
 Profile  
 
PostPosted: Fri Mar 16, 2012 9:17 am 
Offline
Forum Newbie

Joined: Fri Mar 18, 2011 9:13 am
Posts: 11
I use Blueprint, which has a standard width of 950px. This width should work in all browsers, although different monitors you'll obviously get a different amount of whitespace.


Top
 Profile  
 
PostPosted: Fri Mar 16, 2012 9:53 am 
Offline
DevNet Resident

Joined: Sun Jun 14, 2009 3:13 pm
Posts: 1146
You've got 320px on iPhone and 2560px + on large monitors.

You can use HTML5 & CSS3 media queries for scaling. A 980px container is optimized for any resolutions higher than 1024px and you can use media queries to see if the view port is smaller than 980px. Then you can layout a "Normal", a "Narrow" and a "Mobile" layout. Naturally IE8 and older you have to use Javascript to detect the display size, but other browsers can use CSS3. This is a pretty good tutorial: http://webdesignerwall.com/tutorials/re ... ia-queries


Top
 Profile  
 
PostPosted: Fri Mar 16, 2012 1:39 pm 
Offline
Jack of Zircons
User avatar

Joined: Thu Nov 09, 2006 9:30 pm
Posts: 4484
Location: California, USA
You can never win this game. Not everybody runs their browser full-screen; I seldom do, because i like to have some of my desktop visible so I can easily switch windows or launch from a desktop shortcut. So my advice is don't worry too much about it, you'll never perfectly fit everybody's view of your website, anyway.


Top
 Profile  
 
PostPosted: Fri Mar 16, 2012 4:16 pm 
Offline
DevNet Resident

Joined: Sun Jun 14, 2009 3:13 pm
Posts: 1146
The viewport is the size of the browser window, not the screen. So the technique I describe adapts to your browser's visual area.


Top
 Profile  
 
PostPosted: Fri Mar 16, 2012 4:52 pm 
Offline
Jack of Zircons
User avatar

Joined: Thu Nov 09, 2006 9:30 pm
Posts: 4484
Location: California, USA


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 8 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group