Solved

H Tags Not Looking Right on iPhone

Posted on 2013-12-07
20
435 Views
Last Modified: 2013-12-10
I have a test page at http://www.romancestuck.com/test-pages/iphone-font-sizes.htm. At it, I have the following header tags:

<h1>Writing the Perfect Dating Profile</h1>

<h2>Perfect Profile Questionnaire</h2>

<h3>Your Basic Stats</h3>

They show up right on my desktop with the h1 tag being the largest followed by the h2 and h3 tags. However, on the iPhone, the h1 and h2 tags are smaller than the h3 tag. Why is this and how can I fix it?
0
Comment
Question by:webstuck5
  • 11
  • 9
20 Comments
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Mobile Safari automatically adjusts text size that it believes will be too small to read. You can override this behavior with a special rule for small screens (-webkit-text-size-adjust: none;). Something like:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}
0
 

Author Comment

by:webstuck5
Comment Utility
I don't understand. If Mobile Safari didn't think my h1 tag content was readable then why would it make it smaller?
0
 

Author Comment

by:webstuck5
Comment Utility
Putting that code did make my h1 and h2 tags bigger than the h3 tag but it made all the page's text tiny.
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Mobile Safari is trying to adjust to make all text readable. When you use -WebKit-text-size-adjust:none, you are seeing an exact rendering of your page in miniature on a mobile device. That's why normal text looks tiny. Also, you have overridden the browser's default settings for h1, h2, and h3 tags in your style sheet. You have 17, 18, and 20px for font sizes. Defaults are more spread out and use ems, not pixels. Pixels are not scalable. Your site needs more work to be fully responsive.
0
 

Author Comment

by:webstuck5
Comment Utility
I know that my site needs more work to be fully responsive. That is why I am working on it and asking questions here.
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Asking questions on EE is an effective way to get the details sorted out. Is there anything else I can help with on this question?
0
 

Author Comment

by:webstuck5
Comment Utility
Yes...I have been trying to learn about using em but am somewhat confused. So, you are saying to use:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}

and then somehow I need to set a base font? Do I do that in the body tag and then how do I set ems for the header tags?
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Here's a good description of the various units of measure for font size:
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

When using ems you can set a base size for the fonts on the page and ems will scale to that. Otherwise, a default base font size will be used.

To set ems for the header tags, just use em instead of px. If the base font size is 12pt, 1em will equal 12pt.

@media screen and (max-device-width: 480px){
}

The above is an example of customizing your css to respond to changes in browser window size. It's a powerful tool for responsive design. Any css inside of the { } will only be applied only to browser windows less than 480px wide (the width of an iPhone in landscape mode).

You could, for example, put css in there to resize your header tags just for smaller viewports.

@media screen and (max-device-width: 480px){
    h1 { font-size: 2em }
    h2 { font-size: 1.5em }
    h3 { font-size: 1em }
}

Another important tool for responsive design is the reset css. A "reset" css is a collection of css rules that set the base rules for all element tags on the page so that every browser renders these elements the same way. Then you have a consistant benchmark to build upon. One example of a rest css stylesheet would be normalize.css
0
 

Author Comment

by:webstuck5
Comment Utility
But you also need to set:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}

So, that the iPhone won't alter the content, correct?
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
No, I wouldn't necessarily recommend that. I'd prefer to let mobile browsers do what they do and adjust my specific elements accordingly with @media screen definitions. It might have undesired effects to apply that to the whole page. I was just offering it as a way to demonstrate what was happening to your header tags.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:webstuck5
Comment Utility
So, do I change all font sizes to em?
0
 

Author Comment

by:webstuck5
Comment Utility
So, I was doing some research and someone said to set the body tag to 62.5%. With a browser default font size of 16px, that would mean my font size base would be 10px. So, 1.1em would equate to 11px and 1.2 would equate to 12px, etc. I thought that was really smart so I tried to use:

        body
        {
font-size:62.5%;
font-size:1.2em;
        }

I found out that the 62.5% is basically overwritten and it makes my body font size 19.2px because it uses the browser default font size of 16px as the base. Is there another way that I could use 62.5% to set a base font size and then set the body tag as 1.2em?
0
 

Author Comment

by:webstuck5
Comment Utility
Also, I'm still a bit confused as to how using em font sizes helps. Using em would give me a scalable font size but wouldn't the iPhone still adjust it anyways?
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Here's the part you are not getting when it comes to responsive design and why I said "site needs more work to be fully responsive". When a site is fully responsive, the font sizes are no longer an issue. They will display at normal size. Your site is not responding at all to changes in browser width. Your content area is still being miniaturized for mobile screens because it's using a fixed width. It's in the miniaturization that the webkit-text-size-ajust comes into play. Instead it should be collapsing, not miniaturizing, so that on a mobile device the font sizes will be normal. We have gotten way beyond the scope of the original question, but see if this helps.

As a test, temporarily make these three css changes and observe the difference on mobile devices. This isn't all you would need to do, but it's a start.

Line 109:

#wrap {
    margin: 0 auto;
    max-width: 980px;
    width: 100%;

}

Line 189:

#main {
    max-width: 980px;
    width: 100%;

}

Line 193:

#sidebar {
    display: none;
    float: left;
    padding: 6px 10px 0 0;
}
0
 

Author Comment

by:webstuck5
Comment Utility
I made your suggested test changes at http://www.romancestuck.com/test-pages/iphone-font-sizes-with-changes.htm. Afterwards, I noticed no difference when viewing on my iPhone. On my desktop, I noticed that the page no longer has my left ad sidebar. Are these the changes I am supposed to notice?
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
I had you set the sidebar to display:none for demonstration purposes. If you wanted a site that looked good on mobile devices you would have to move the sidebar to either above or below the content when the screen was less than 480px wide because there's no room for side by side content on a mobile device. This would need to be planned out from the beginning.

The temporary css changes I suggested would have displayed on an iPhone as in the attached photo IF your site were set up properly to be fully responsive. It did not work on your site because there are too many fixed width elements on your page. In a responsive site, width is usually set to 100% or close to it. You cannot used fixed widths unless they are smaller than your minimum target width. I use 320px as a minimum because that's the width of an iPhone screen in portrait mode. Sites need to be designed from the ground up to be fully responsive. Trying to retrofit an already complex page like yours would take some time. You seem to be looking for a quick cut and paste fix and it's not going to happen. Your original question is a distant memory now, we are off on this responsive design tangent.

This is a mock up of how your content would look on an iPhone if your site were fully responsive. I copied the view source of your posted test page, deleted most of the markup from the end of the page and added this meta tag to the head,  <meta name="viewport" content="width=device-width, user-scalable=no">, and here is the result:
Mock up of your page on an iPhoneI didn't mess with any font sizes or add any css. Notice that there is no miniaturization of your page here. Instead, the content is compressed down to the width of the screen and displayed with full scaled text so it can be easily read.
0
 

Author Comment

by:webstuck5
Comment Utility
I'm sorry that my question has gone away from what it initially was. My idea was to use Moblie Safari's miniaturization process to my advantage and set things so that they could miniaturize but still be functional. If I put:

 <meta name="viewport" content="width=device-width, user-scalable=no">

will that effect the desktop display of the site? I appreciate all your help. Should I just accept one of your answers and maybe start a new question so you can get more points for your time?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
Comment Utility
Adding the viewport meta tag will not negatively affect the desktop display of the site.

If mobile browsers did not miniaturize non-responsive web pages, you would only see the upper corner of every page and have to scroll like mad to see all of the content. To patch this problem, mobile browsers like Safari will miniaturize the page for you as a backward compatibility feature. Ideally, every new site should be fully responsive so that eventually, all sites will render properly on all screen sizes. By "render properly" I mean that it should be readable without the user having to zoom in. The idea of purposely creating a new site that is not responsive for mobile devices is foreign to me. Use miniaturization to your advantage? It has no advantage for modern web developers. It's just a compromised way of rendering OLD sites on mobile devices.

If one of my posts satisfactorily answered the original question then, yes, you should close the question by accepting that post as the answer. There's no limit to how many questions an EE member can ask nor how many total points they can award so there's no value in allowing a question to morph into other questions. In fact, it just adds unnecessary reading material for anyone searching the EE knowledge base, finding the accepted answer, plus tons of comments unrelated to the original question.
0
 

Author Comment

by:webstuck5
Comment Utility
Well, I wasn't planning for my original question to morph into something else.
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Not a problem. I've heard other EE members refer to it as "scope creep". Happens all the time. I hope you found my off topic comments useful just the same. Thanks for the points.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
USE HTML to redirect a webpage to a local Xcel file. 2 19
CSS grid style change 2 13
iOS and RAM 7 20
iPad Won't Connect 16 30
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

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

10 Experts available now in Live!

Get 1:1 Help Now