Forums

JeremyEnglert

http://goo.gl/qaPKx

If you shrink the browser to 480px or less, you will see the mobile design displays fine. However, on an actual iPhone (in portrait), it displays with the content area being much too wide.

Here's a picture of it on an iPhone:
http://img703.imageshack.us/img703/1944/photoik.png

cyneWATCH

The site's only responsive part is its changing for the iPhone size.
It would be much easier and better to just have a separate site just for iPhone: basically, if the screen is a certain size or smaller, let a box be shown that lets people go to that site, something like this:

</head>
<body>
	 <div id="send-to-mobile">
	 	 <a href="http://m.yourdomain.com">Special mobile site here.</a>
	 </div>
	 ...
</body>

With the CSS just like this:

#send-to-mobile {
	 background: white;
	 box-shadow: 0 0 20px black;
	 display: none;
	 padding: 50px;
}

@media screen and (max-width: 480px) {
	 #send-to-mobile {
	 	 display: block;
	 }
}

Then by creating the mobile site separately, you're using a smaller stylesheet, and you're making a much more optimised version for the iPhone, as well as being free for designing the main site specifically for desktop.

JeremyEnglert

That's a good idea, but I plan on expanding this stylesheet to work with other devices as well. I need to pinpoint this issue though before moving too far forward with it. It's really weird that it displays fine in responsive testers, but breaks on the actual phone itself.

cyneWATCH

Might have something to do with retina?

Mitchell

Do you have this meta tag in the head of your page?
If it isn't there, it will cause problems like you are having.


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

JeremyEnglert

It ended up being a WordPress plugin that was causing the issue - even on pages the plugin was not loading on.

treehouse : what would you like to learn today?

Forums

[Solved] Responsive Design Looks Fine in Browser - Breaks on iPhone