Solved

Flexible HTML for SmartPhone

Posted on 2011-09-14
3
433 Views
Last Modified: 2012-05-12
How can I make a smartphone html layout fit portrait and landscape?

http://pvplayerspizza.com/mobile

I need a primer for smartphone web design. Can someone point me at a good one?
0
Comment
Question by:webdork
  • 2
3 Comments
 
LVL 29

Expert Comment

by:Randy Downs
ID: 36538224
0
 
LVL 29

Accepted Solution

by:
Randy Downs earned 500 total points
ID: 36538250
flexible html

http://adactio.com/journal/4470/

Mathias Bynens updated the code to use querySelectorAll which is supported in Mobile Safari. Here’s the code I’m currently using:
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
  var viewportmeta = document.querySelector('meta[name="viewport"]');
  if (viewportmeta) {
    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
    document.body.addEventListener('gesturestart', function() {
      viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
    }, false);
  }
}
You can try it out on Huffduffer, Salter Cane, Principia Gastronomica and right here on Adactio.
Right now there’s still a little sluggishness between the initial pinch-zoom gesture and the scaling; the scale values (0.25 - 1.6) don’t seem to take effect immediately. A second pinch-zoom gesture is often required.
0
 

Author Closing Comment

by:webdork
ID: 36538461
thank you
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
website rewamp 5 42
replica website 2 35
HTML Anchor Link Problem 3 35
How to eliminate "realname" and "email" from formMail.php (tectite.com) results. 3 32
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

840 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