Solved

Web Site on iPhone Doesn't Take the Whole Screen

Posted on 2013-12-10
7
402 Views
Last Modified: 2013-12-12
I am trying to create a web site using responsive design. I have a test page set up at http://www.romancestuck.com/test-pages/iphone-font-sizes-with-changes.htm. When I go to it on my iPhone, it just shows the content in a very narrow column on the left side of the screen instead of using the full width of the screen. Could you let me know why this is?

Thanks!
0
Comment
Question by:webstuck5
[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
  • 2
7 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39708910
I don't know what you think responsive design is, but you do not have anything on that page to support any concept that could be called responsive.

So I think you need to start with an understanding of the terms:
http://en.wikipedia.org/wiki/Responsive_web_design
Some of the link there will help a lot in undrstanding

Then you need exposure to the difference in mindset to do responsive design:
 http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

Then you need to understand the critical structure format built around media queries:

https://developer.mozilla.org/en-US/docs/CSS/media_queries

Or you can stumble around looking for plugins to implement "responsive design" ideas that someone else has and learn very little except how deal with the frustration of not being in control of your code.

As for iphone, it is always a problem, because Apple thinks they are too superior to follow standards, including not using the standard 96dpi for screens to map screens.

Cd&
0
 

Author Comment

by:webstuck5
ID: 39710509
I did add some things to work towards it being responsive. I have also been reading a lot to learn more about it and asking questions on here to learn more. Maybe, if I could start with just getting the answer to my question of why the page only takes a small amount of the width of the iPhone would be helpful.

Thanks!
0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 39711799
It seems that the last ad on the page ("#ad_footer_1") has content with a fixed width of 970px. That makes the iPhone fit a page that wide into a screen much less wide then that, hence the effective font-size shrinks.

Putting ads in a responsive layout is a challenge. I'm not aware of any good solution to it. One quick and dirty fix would be to give "max-width:100%" and "overflow:hidden" to the ads.

Do you really think that <br> elements are the most appropriate markup for that page? That sure looks like unordered lists to me. Also why does the page have an <h2> and <h3>s but not an <h1>? If the font-size is too big, use CSS to change it.
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!

 

Author Comment

by:webstuck5
ID: 39713158
A lot of the HTML problems are because I stripped the page content out of my CMS system to just focus on making it work on mobile devices first. So, when the CMS header and footer code gets added, it will have an <h1> tag. Yeah, the content should probably be in a list format. I was just using an old page as my test page. Thanks for answering my question. That makes a lot of sense! Let me test out your code to make sure it works and then I will award you the points!
0
 

Author Comment

by:webstuck5
ID: 39713198
Out of curiosity...you said for a "quick a dirty fix" use "max-width:100%" and "overflow:hidden"  but what is the longer fix...to just use smaller ads? I tried a smaller ad there before but probably since the whole page was being shrunk by mobile safari, it didn't look right.
0
 
LVL 42

Expert Comment

by:David S.
ID: 39713252
The other solutions I've heard of are to use smaller ads or to use additional JavaScript code to select ads based on viewport size.
0
 

Author Closing Comment

by:webstuck5
ID: 39713443
Thanks so much!
0

Featured Post

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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS: Forcing Tables Where the Width is Greater than 1000px to Behave Like Width: 100% 8 63
migrate cisco cat configs 3 70
.CSS HTML Help 3 57
Loading Self-Hosted Fonts 12 43
     Intro      In this article, I will show you how to parse a JSON in Swift using an open source library called SwiftyJSON (https://github.com/SwiftyJSON/SwiftyJSON). If you haven't heard of a JSON before, it stands for JavaScript Object Notation…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

734 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