[RESOLVED] Fixed Width changing on different screens...is this possible?!
So I'm building up a test site for a client on a folder on my website:
Once it's done, it'll be switched over to a new live server. The site has a fixed width which I'm actually specifying with PHP (the stylesheet uses PHP, but caches it, don't worry). So when I'm specifying the width of the site, I'm using this $pagewidth variable, and it's 1000px. All is well in testing. I just download chrome on my iPad, and test the site. What the hell??
The site is compacted. The tractor is pushed slightly inwards, but still sits at the left-most edge. The little things on the right on the home page that say about consultancy and contacting us etc. spill onto a new line. Same goes for Safari on the iPad. I then test it on another, older computer in the house, and have the same result.
I've never come across a situation like this, where a fixed width website renders differently on different screens.
It will always happen as the way a web page looks depends on the browser's viewport size at any screen resolution.
Choosing Dimensions for Your Web Page Layout:
In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
Care With Font Size: http://www.w3.org/QA/Tips/font-size
Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/
Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/
Adapt.js - Adaptive CSS: http://adapt.960.gs/
Yes, but this is a fixed width. There should be no variance in the space available to me from browser to browser. Fair enough, if the resolution of a screen is small, they will have to scroll sideways (the width is only 1000px though), but the actual area of the webpage should remain the same. It doesn't.
EDIT: I mean it's a good 50px or so out. What gives?
Last edited by flashcus; 07-05-2012 at 04:30 AM.
Fixed width does not mean absolutely fixed as it is all relative to the browser's viewport size. If the vertical and horizontal content can not be viewed, then the default action of the browser is to generate scrollbars for the viewer unless you have CSS rules overriding this action (visibility: hidden. I have a 23-inch screen and using a high resolution, yet, if I resize my browser small enough, it will generate a horizontal scrollbar along with the vertical one which probably has already been generated.
Exactly, the same goes for me. If I scale my browser to a small size, scrollbars are generated. This is normal and what I want. However, on my iPad and another computer, the actual size of the website is reduced. Maybe a screenshot will help..
You're talking about the mobile web which is a different "animal" all together:
5 Stunning and Usable Mobile Website Designs: http://designfestival.com/5-stunning...&utm_term=More
Learn the Mobile Web: http://learnthemobileweb.com/2009/07/mobile-meta-tags/
10 Ways the Mobile Web is Different: http://www.elated.com/articles/10-wa...-is-different/
Redesigning a Site For Mobile: What's Involved?: http://www.elated.com/articles/redes...hats-involved/
How to Validate and Test for the Mobile Web:
Make Your WordPress Website Mobile-Friendly in Minutes: http://designfestival.com/make-your-...dly+in+Minutes
Web Mobile Browser Shots: https://browshot.com/
Like I said, on another computer as well running the latest version of firefox. Not just the mobile web.
Fixed. I knew it wasn't possible. The site was still rendering at 1000px, but it was all to do with fonts. Not to worry, all is good.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)