CSS Media Queries - Responsive Web Design Ipad Issue

HTML & CSS
1

Hello,

I have searched all over and have tried everything and can’t seem to pin point my issue. I have a site at http://www.heatsurge.com and it is using Media Queries to display the mobile version of the website. This looks great on the iphone and android phones, but here is my problem. The site works great on Ipad landscape mode but in portrait mode it is to large. I don’t know what I am doing wrong, I have tried a handful of different techniques but still am unsuccessful. The overall goal is to have the site look the same in both portrait and in landscape on the ipad just as it looks like on a computer screen, the only difference is the phone/mobile version. Does anyone that is familiar with this technique have any hints or tips they can send my way?

Thanks in advance.

2

Cant seem to find any @media rules for targeting the ipad anywhere in your code…unless I’m missing something! Plus I notice you are not using reponsive grids in your CSS i.e. You have set pixel widths rather than percentages or ems.

Try these rules and appy your styles where appropriate for ipad.

/* Smartphones (portrait and landscape) ----------- /
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/ Styles */
}

/* Smartphones (landscape) ----------- /
@media only screen
and (min-width : 321px) {
/ Styles */
}

/* Smartphones (portrait) ----------- /
@media only screen
and (max-width : 320px) {
/ Styles */
}

/* iPads (portrait and landscape) ----------- /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/ Styles */
}

/* iPads (landscape) ----------- /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/ Styles */
}

/* iPads (portrait) ----------- /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/ Styles */
}

/* Desktops and laptops ----------- /
@media only screen
and (min-width : 1224px) {
/ Styles */
}

/* Large screens ----------- /
@media only screen
and (min-width : 1824px) {
/ Styles */
}

/* iPhone 4 ----------- /
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/ Styles */
}

3

That is correct I am not trying to target the ipad. I want the ipad version to be just like the screen/monitor version. I am only targeting the iphone/android size devices. If I remove the view port meta tag <meta name=“viewport” content=“width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0” /> then it displays correct on the ipad like it should. Just not very familiar with all the viewport stuff. I just want to target the small device only.

4

Has there been a solution to this yet? I am facing the exact same issue. I don’t see the point of creating a separate stylesheet for iPad portrait mode. What’s the point of it? It would be nice if my landscape stylesheet scaled down automagically. How can this be done?