Hey,
i just redesigned my company website with a width of 1050 pixels. This, however, leads to problems on smaller screens (1050 pixel width or less) and the iPad in particular.
Is there any way to center the viewport at say 1024 pixels (the iPad width), so that at least no horizontal scrollbars appear at the bottom?
Thanks for any help!
Usually the resolution is going to be determined by the user. I use Windows and can set it up to four different ways. The screen, of course, stays the same size.
Here is the script ( one of many ) to help determine which browser is being used. LINK
Please show a screenshot of the useragent “eat at Joes”. That would be hilarious !
There’s something very wrong with this picture… you want it to work on devices like an iPad yet you want it to be 1024 pixels wide (which immediately will cause the site to break for all the iPhone / Android / other cellphone users out there). There’s a lot more to mobile devices than the iPad and the cellphone market has a heck of a lot more people browsing the web in that manner. If your website relies on strict widths you had better get used to ugly scrolling! 
PS: Ignore the advice given on browser sniffing, it’s ineffective and rude to force redirect people based on assumptions.
That’s garbage. browser viewport siize has nothing to do with screen resolution and there is no way of detecting which browser is being used (apart from hoping the useragent free format field is correct - Which browser is it if the useragent reads “eat at Joe’s”?).
The first thing to do is to determine what resolution your visitors use. Designing for iPads could be disastrous if most of your visitors are not using it.
Also, there exists a javascript ( I do not remember where to find it now. ) that can be created to automatically send people to the right “version” ( resolution ) of your site. It “sniffs” the browser being used and sends people to the right pages you have pre made with the correct resolution.
The basic point of my post is; “Know your target audience.” Their information should be in your web host account.
Hey,
Thanks everybody for your feedback.
@Karin: I eliminated the horizontal scrollbars temporarily using a hack. But you are perfectly right, I should better keep them.
The reason why my design doesn’t look good on small screens is the rounded rectangle shape just below the light blue banner. It is 1050 pixels wide. I don’t want to make it more narrow though, because that would look odd.
Can anybody suggest another solution to this?
The design still breaks on really small screens, around 1024 pixels width (e.g. on the iPad). If you want to know exactly what i mean and don’t have an iPad check out this site http://ipadpeek.com/ and enter my URL www.designbits.de there.
Thanks for any help in this matter.
Tbh, I think you could easily get that design to 1024px without much of a redesign
Haven’t looked at it but wouldn’t it be just as easy to convert it to liquid?
I just looked at your site and tried resizing to see what it looks like in a smaller window. There were no horizontal scroll bars. Which made most of your links inaccessible. Unless you want to force everyone to view your site in full screen mode you might want to turn the horizontal scroll bars back on. They may not be pretty but they do serve a purpose.
Having the links in a vertical list on the left works better than a horizontal list across the top right when you plan to eliminate horizontal scrolling.
I am using Firefox version 3.6.3
Sounds like it needs a redesign so that it can fit whatever width is available. If you are going to use fixed width then a width of under 544 pixels is required if you want the pages to work everywhere.