Solved

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

Posted on 2013-01-18
12
803 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 23

Expert Comment

by:Roopesh Reddy
Comment Utility
0
 

Author Comment

by:vthunder70
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Hi,
Meanwhile can you try this  -
<meta name="viewport" content="width=device-width;">

Hope it helps u...
0
 

Author Closing Comment

by:vthunder70
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
iOS Upgrade to 9.3.5 failing 7 49
Ios10 upgrade 8 67
Pictures cut off when texting 13 57
iPhone Camera Apps - Raw images? 2 24
Does your iMac really need a hardware upgrade? Will upgrading RAM speed-up your computer? If yes, then how can you proceed? Upgrading RAM in your iMac is not as simple as it may seem. This article will help you in getting and installing right RA…
With mobile becoming increasingly important to the business world, it is in your best interest to make sure that your email signature looks great across all types of devices. Find out how to create a mobile email signature with this guide.
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now