Solved

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

Posted on 2013-01-18
12
810 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

By this time the large percentage of day-to-day transactions have shifted to mobile banking; here are some overriding areas QAs must investigate while testing mobile banking apps.  
A professional opinion on which Apple product to buy, and a tidbit about the WWDC.
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
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…

710 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