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

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?
vthunder70Asked:
Who is Participating?
 
Kyle HamiltonData ScientistCommented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
vthunder70Author Commented:
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
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
Kyle HamiltonData ScientistCommented:
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
 
Roopesh ReddyIT AnalystCommented:
0
 
vthunder70Author Commented:
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
 
vthunder70Author Commented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
Roopesh ReddyIT AnalystCommented:
Hi,
Meanwhile can you try this  -
<meta name="viewport" content="width=device-width;">

Hope it helps u...
0
 
vthunder70Author Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.