Solved

iphone viewport not working as expected from portrait view to landscape view

Posted on 2013-01-18
12
806 Views
Last Modified: 2013-02-19
Hi Experts,
I've made a responsive design that has 2 issues:

1. when the site loads in portrait view and the user flips the phone to landscape view the design doesn't respond to the new breakpoint (min-width: 480px). It stays at the breakpoint used for portrait (min-width: 320px). The weird thing is that if the site loads on landscape view, it loads using the appropriate style sheet for breakpoint (min-width: 480px) and works as expected when flipping to portrait using the style sheet for (min-width: 320px)

2. No matter how the sites loads (portrait or landscape) my font is zoomed in on landscape, always! Portrait is always good.

I've found some articles online about javascript fixes but none of those have worked.

Any suggestions?
0
Comment
Question by:vthunder70
  • 4
  • 4
  • 2
12 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38808079
for the font size problem, you can use this css rule:

-webkit-text-size-adjust: none;

for the other issue, you would need to post a link to your site. However, it's possible the font-size issue has to do with that.
0
 

Author Comment

by:vthunder70
ID: 38815049
that css rule solved the problem with the font. The funny thing is when I searched around for this solution, it says that the user wouldn't be able to zoom in the content, but you can... I thought this was weird. Do you know why that is?

I can still use some help about the flipping from portrait to landscape. Unfortunately I can't share the link :(
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38815166
I can't really help you without seeing the site in action.

however, here is something to consider:

When using min-widths, make sure the order of the queries is low to high:


@media only screen and (min-width: 320px){
                body{
                    background-color: red;
                }
            }
            @media only screen and (min-width: 480px){
                body{
                    background-color: blue;
                }
            }

Open in new window


When using max-widths, set order high to low:

@media only screen and (max-width: 480px){
                body{
                    background-color: blue;
                }
            }
            @media only screen and (max-width: 320px){
                body{
                    background-color: red;
                }
            }

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38815344
0
 

Author Comment

by:vthunder70
ID: 38815680
This is my META tag
<meta name="viewport" content="width=device-width; initial-scale=1.0;">

I'm using eCSSential to load my css files for all different breakpoints. and this is the order in how I'm calling them:

var loadCSS = eCSSential({ 
		"all": themePath + "/css/all.css",
		"(min-width: 320px)": themePath + "/css/min-320px.css",//iphone portrait			 -- bkg green
		"(min-width: 480px)": themePath + "/css/min-480px.css",//iphone landscape			 -- bkg orange
		"(min-width: 768px)": themePath + "/css/min-768px.css",//ipad portrait				 -- bkg black
		"(min-width: 1024px)": themePath + "/css/min-1024px.css",//ipad landscape or desktop -- bkg red
		"(min-width: 1280px)": themePath + "/css/min-1280px.css"//big monitors				 -- bkg blue
	});

Open in new window


Before when I had them all in one file it was still giving me the same issue.

I hope this helps you help me :/
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38815833
you shouldnt use javascript to load css. its pssible the script isnt detecting orientation change events properly. it doesnt even matter - dont mix css with js period.


put all your css in one file with the media queries at the bottom in the correct order.
0
 

Author Comment

by:vthunder70
ID: 38815865
well, I just want to load the css that I need for a particular device. That's why I use js to load my css. I don't want unused CSS been send to my client

The error happens even if have them all in one file.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38815927
you create more overhead with the javascript than if you loaded all the css in one file.

If your media queries are in the right order, and you're still having trouble, you need to post your html and css. You can always remove any sensitive content.
0
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38817338
Hi,
Meanwhile can you try this  -
<meta name="viewport" content="width=device-width;">

Hope it helps u...
0
 

Author Closing Comment

by:vthunder70
ID: 38907793
Sorry it took so long. Not an A because in some case I find valuable loading the CSS as needed.

In this case the CSS wasn't too big so it was ok to have it all at once.
The problem was that the JS detected a small screen on 'portrait view' so it only loaded the portrait view CSS so when flipped to landscape it hadn't loaded the landscape CSS.

So in this case having them all together fix teh problem.

Thank you
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A brief look into what is, how to use, and how to make GIFs
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …
Users will learn how to set proper sequence settings, scale images, paste attributes, add transitions, fades, and music. Open up Final Cut Pro 7 and Create a new Project: Set the Sequence Settings. a) Click File > Easy Setup > Format > Apple ProRe…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question