Using DW CS6 v12.2 build 6006 on W7
but the 480hx800h smartphone version does not work: it looks OK when building it in Dreamweaver (see ss2.gif)
but ss3.gif shows what it took like on a iPhone 4.
It's the same on an Android phone. They look like a phone with a screen size < 321px. I don't understand why: this is the content of the media query file:
/* Phone */
@import url("index_phone.css") only screen and (max-width:320px);
/* iPhone */
@import url("index_iphone.css") only screen and (min-width:321px) and (max-width:480px);
/* Tablet */
@import url("index_tablet.css") only screen and (min-width:481px) and (max-width:768px);
/* Desktop */
@import url("index_desktop.css") only screen and (min-width:769px);
and of course I'm using the index_iphone.css file for the smartphone design. Every page in the site forces the devices to report their actual screen size: <meta name="viewport" content="width=device-width">
What am I doing wrong? I can understand the lack of scoll bars previewing a touchscreen - but the page does not scroll on the device either.
Can someone help? Thanks
Why didn't you use the FluidGrid Layouts feature for this?
Example: View source to see the code.
I have a problem with your #container block being set to position:fixed. I don't understand why you need that because positioning removes content from the normal document flow.
Nancy thanks for your reply.
I sorted out the scrolling... a stupid typo in the css file.
However I'm yet to understand why on the iPhone 4 i get the layout of a phone with a screen less than 321px wide.
...as to your question why I did not use FluidGrid Layout... when I first opened I got a bit scared, it looked both complex and not flexible, and I had a design in mind which I wanted to translate into HTML5. I come from video and graphic design and I'm not yet good at thinking HTML. It's a legitimate question and I should make an effort to understand it.