?
Solved

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

Posted on 2013-01-18
12
Medium Priority
?
814 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 1500 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

If your app took Google’s lash recently, here are the 5 most likely reasons.
You should read OS supplied guidelines before developing. I can't stress that enough. The guidelines will help you understand the reasons mobile app developers do what they do.  Apple is very particular when they review appstore submissions.
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…
CodeTwo Sync for iCloud (http://www.codetwo.com/sync-for-icloud?sts=6554) automatically synchronizes your Outlook 2016, 2013, 2010 or 2007 folders with iCloud folders available via iCloud Control Panel. This lets you automatically sync them with…

719 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