SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    viewpoint for 1024 * 800?

    hey folks,
    wanted to know if a website is build in 1024 * 800 Res. what will be the viewpoint at which the website is viewed fully?
    All those who wander aren't lost.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    You may want to read The Ultimate Screen Rez FAQ because it mentions in much more detail that you'll never know for sure.

    It depends on the thickness of the browser chrome (how wide the scroll bars are, or if there IS a scrollbar) and some people like having a left-sidebar open in their browser (If I hit CTRL B in Firefox I accidentally get one of those things opening up on the left, and it's a good 100px or so wide). People with a screen width of 1024 may also just keep their browsers slightly smaller so they can grab the edges with the mouse.

    I'm currently doing a site where I've decided there's no practical way I can stop scrollbars for 600x800, even though I try to support that size. So I "moved up" to a minimum that works for 1024. First I use my browser's Window Resizer plugin to see what FF thinks 1024 is, then make the browser somewhat smaller from there (not enough to accomodate a goofy left sidebar in the browser though). So I set my sizes smaller.

    When I'm building for 600x800, I set the minimum widths to 750-768px, depending. For 800px screen, this leaves some room for stuff like scrollbars.

    For 1024, I try to stick with no greater width than 990px, though in my current project it became 1000px : ( I'm comfortable with the fact that there will be people with a scrollbar even if they do have 1024 resolution.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,215
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by emaarkhan View Post
    if a website is build in 1024 * 800 Res. what will be the viewpoint at which the website is viewed fully?
    Probably around 1024 * 800.

    Am I missing something in your question? Do you mean a wrapper width of 1024px?

    EDIT: ah, Stomme's answer makes sense, so hopefully that answers your question.

  4. #4
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thnx somme.
    All those who wander aren't lost.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Probably around 1024 * 800.

    Am I missing something in your question? Do you mean a wrapper width of 1024px?

    EDIT: ah, Stomme's answer makes sense, so hopefully that answers your question.
    The question was about the viewport size when the screen resolution is 1024 x 800.

    From the screen resolution you need to deduct any fixed toolbars as the browser can't occupy that space. The size of the fixed toolbars is unknown as you don't know if the person has any fixed toolbars, what side of the screen they are attached to or whether they are one level high or six..

    From the remaining space you need to deduct the browser chrome (window edges, menus, toolbars etc) as the viewport is contained within that. The size of the chrome is also unknown as it varies between browsers and also on the number of toolbars each person has open.

    The last variable to take into account is whether the browser fills the maximum available space or not. As the resolution of the screen gets higher the percentage of people with the browser maximised gets less since higher screen resolutions allow for displaying multiple windows with less overlap. It is also possible on some operating systems to have the browser open to a size bigger than the screen.

    So for 1024 x 800 resolution screen the viewport can be anything between 200 x 200 and 2000 x 1500
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    so it mean i should let the height in &#37; so its dependant of resize of the window or on tool bar.
    All those who wander aren't lost.

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Stomme i am more concerned about height then width. i need height
    All those who wander aren't lost.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Emar, then you'll have to tell people to use a monitor with x dimensions. Monitors and screens come in many different shapes, which makes it unfortunate that CSS lets us easily compute widths based on browser width but not heights. Bleh. The Winblows machine at work has a mostly square-ish screen with 1024 resolution... but both my laptop and my colleague's 2" screen are very rectangular... I can't even properly set my computer's resolution to 600x800, because things have to stretch on my wider screen.

    You can try to go for a "most common middle" to make the page look mostly okay on many screens. But for instance, my screen is 17" and is sitting at 1460x9-hundred-something right now. But when viewing a friend's page built for my screen size and rez settings, I could not see the bottom of his page without scrolling. Why? Because I was using Firefox, where I have the Web Developer Toolbar under my address bar, and then on the bottom I have a bar that states scripts have been blocked. That eats up a total of around 300 pixels or so of height.

    Unless you resort to Javascript that can measure the height and width of the viewable screen, you won't be able to precisely hit a 1024x800 screen every time. You can just make sure it CAN scroll down and try to go for what you think will look good on most screens/browsers set at that size.

    so it mean i should let the height in % so its dependant of resize of the window or on tool bar.
    Unfortunately, CSS doesn't set heights like that. If you set a % height on a box whose parent doesn't have an explicit (non %) height, then its height will become "auto", which means "the height of the content inside".

    This does not work:

    parent {
    height: 60%;
    }
    child {
    height: 100%;
    }

    but this does:
    parent {
    60em;
    }
    child {
    height: 100%;
    }


    There are tricks for getting 100% high pages, and that *might* be what you're after... why don't you check out the CSS FAQ sticky in Design area? The first post has a bunch of common things people ask for, and one of them is 100% height. It also depends on your design, but mostly, you'll have to try to think of a way to "fake" it, because you only get one chance at 100% height: only one element can do that if you're using the 100% height technique (well, unless you use the absolutely-positioned columns trick, which needs fixing in IE6). See what you can fake first.

  9. #9
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Well what about mobile devices? If you have a 4 inch screen with Internet access, having the right amount of height is impossible. In life, most things are possible, avoiding the need to scroll on the web is not one of them. Simply put: Don't assume people have any amount of space available, ensure your site is as durable and flexible as you can get away with, and never EVER rely on fixed pixel widths and heights unless you are happy with scrolling being required. There's no way you can just put down a width and height and guarantee it'll work... there's too many screen sizes, resolutions, ways to manipulate windows, sidebars, toolbars and other stuff that can affect the viewport. The cellphone revolution is forcing everyone to rethink what they thought about "everything looking the same" across devices.

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Well what about mobile devices?
    Maybe use offtopic brackets with this? I don't know of any mobiles that are 1024x800, which is what Emar's talking about. He's not making a mobile application.

    *edit Maybe I'm wrong in my assumption that Emar's building something specifically for this size, but that's what I've been running with.

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Who said mobile application? I'm talking websites here. You do realise most modern cellphones can browse the web as well as a PC right? I'm not trying to make assumptions, but it seems like he wants his website to work without scrolling for everyone... and an increasing percentage of all users use cellphones.

  12. #12
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    so i took a roundup of browsers like firefox and chorme and what i get is i should minus nearly 170 px.
    All those who wander aren't lost.

  13. #13
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well i don't want to use it for cellphone its a coopearte web app. what i don't want is scrolls on a resolution 1280*800. below that scrolls appear i don't have a problem
    All those who wander aren't lost.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,627
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As said before, unless you can control all the variables that a user has, there isn't a pure CSS way to ensure that it looks good on that resolution
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •