Mobile Web

From BC$ MobileTV Wiki
Revision as of 19:10, 21 September 2015 by Joe (Talk | contribs)

Jump to: navigation, search

The Mobile Web (also refered to as the Mobile Internet) is currently a minimized version of the current world wide web, however many have claimed that until the functionality and capabilities of the Mobile Web and the devices which access it improve, it may be relegated to a scarcely used version of the full Web.


Specifications


Approaches

META

Automatically set the page width to the device's physically available screen width/resolution:

<meta name="viewport" content="width=device-width" />

[15]


Disallow pinch/zoom (not a good move for accessibility reasons, but in the right context to maintain screen to content ratios for a particular experience):

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

[16][17][18]


CSS

Specify the media type to render mobile-specific styles:

<link type="text/css" rel="stylesheet" href="style/mobile.css" media="handheld" />

[19]

media Attribute

The CSS spec actually defines a number of device profiles, however, reliance on these as the only method of deciding device dimensions and presentation can be prone to errors as not all devices and browsers respect or follow the standards in this regard. Some may report the wrong profile or no profile at all.

Projector:

<link type="text/css" rel="stylesheet" href="css/projector.css" media="projection" />

Desktop:

<link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" />

Television:

<link type="text/css" rel="stylesheet" href="css/tv.css" media="tv" />

Mobile device (i.e. Smartphone, Cellphone, etc):

<link type="text/css" rel="stylesheet" href="css/mobile.css" media="handheld" />

Tablet:

<link type="text/css" rel="stylesheet" href="css/tablet.css" media="only screen and (min-width: 321px) and (max-width: 768px)" >

Printer and other print devices or software (such as a PDF converter, screenshot saver, etc):

<link type="text/css" rel="stylesheet" href="css/printer.css" media="print" />


@media Queries

You can also use the above technique of Media queries inline within <style> tags, or inside of an externally loaded CSS file itself:

 @media handheld {
   .container {
	padding: 0;
	margin: 0;
        width: 100%; /* use % widths to prevent content overflows/resizes on mobile */
   }
   .left {
	padding: 0;
	margin: 0;
        width: 20%;
   }
   .right {
	padding: 0;
	margin: 0;
        width: 80%;
   }
 }

[20]

Another useful trick is to be able to make an image or lengthy or secondary content section (i.e. within an ASIDE, DIV or P tag) appear only on orientation change:

 .sidebar div { background:url(/img/huge.png) }
 @media only screen and (max-device-width: 480px) {
   .sidebar { display:none }
 }
 @media only screen and (max-device-width: 480px) and (orientation: landscape) {
   .sidebar { display:block }
   .sidebar div { background:url(/img/small.png) }
 }

[21]


Here's a full list of common queries for different screen resolutions and physical device sizes (organized in order of size, biggest to smallest).

Projectors such as in a home theater system, Work office presentation or board room, or Public Advertisement Display screens (expect HD, inability to read small text and changing dimensions => 2048x1536 and up, even iPad now has these specs with its retina display at 264 pixels per inch (ppi))[22]

TVs such as "Smartscreens", Google TV, Connected TVs, etc... (typically a widescreen with HD and retina display ==> 1920x1080)

Business, Hardcore Gaming or Developer Computers (usually use widescreen and/or dual screen display ==> 1680x1050)

@media only screen and (max-width: 959px) {  } 

Desktops and Laptops (most home PC & Mac users fall into this category ==> 1024x768)[23]

@media only screen and (max-width: 959px) {  } 

Desktops, Laptops or Netbooks with Smaller than standard 960 pixels wide ( ==> 800x600):

@media only screen and (max-width: 959px) {  }

Tablet Portrait size to standard 960 (tablets and browsers ==> 800x1200):[24]

@media only screen and (min-width: 768px) and (max-width: 959px) {  }

All Smartphone Mobile Sizes (typically only high-end smartphones approach this max-width ==> 640x480) and Tablet Landscape (lower-end portable devices and browsers ==> 600x1024):

 @media only screen and (max-width: 767px) {  }

Mobile Landscape Size (horizontal, left-to-right ==> 480x360) to Tablet Portrait (devices and browsers ==> 480x800):

 @media only screen and (min-width: 480px) and (max-width: 767px) {  }

Mobile Portrait Size (vertical, top-to-bottom ==> 1680x1050) to Mobile Landscape Size (devices and browsers ==> 320x240):

 @media only screen and (max-width: 479px) {  }

Legacy Mobile Phones, these old devices were believe it or not "phones" before they were portable entertainment centers or business tools and range widely in physical screen size, but typically only support video at 176x144:

 @media only screen and (max-width: 320px) {  }



User-Agent

User-Agent string matching or checking can be done to determine on the server-side (or client-side) whether the user is accessing your site via a Mobile Device or larger screened Desktop. This method is subject to abuse though as the User-Agent can be spoofed, hidden, missing (i.e. old device or stripped down) or just plain inaccurate, and should be considered unreliable. However, it can still be used for "suggested" redirecting or basic device/capability checking. Important variables include:

  • navigator.userAgent
  • navigator.appName
  • navigator.appVersion

To list out all User-Agent related information, use the following:

 for (i in navigator) {
  document.write('<br />navigator.' + i + ' = ' + navigator[i]);
 }

[25] [26] [27]

 <?php
 
 $mobile_browser = '0';
 
 if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
 }
 
 if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
 }    
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda ','xda-');
 if (in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
 }
 if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
    $mobile_browser++;
 }
 if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {
    $mobile_browser = 0;
 }
 if ($mobile_browser > 0) {
   // do something
 }
 else {
   // do something else
 }   
 
 ?>

[28] [29]


Responsive Design

Responsive Design uses a combination of methods (including )





Tools


Resources


Tutorials


External Links


References

  1. Mobile Web Application Best Practices: http://www.w3.org/TR/mwabp/
  2. wikipedia: HTML5 in mobile devices
  3. CSS3: http://www.w3.org/TR/css3-roadmap/
  4. HTML5 from a Mobile Perspective: http://www.cloudfour.com/html5-from-a-mobile-perspective/
  5. How to Create HTML5 iPhone Applications: http://blogfreakz.com/tutorial/html5-iphone-applications/
  6. CSS Mobile Profile 2.0: http://www.w3.org/TR/css-mobile/
  7. wikipedia: XHTML Mobile Profile
  8. Mobile Web Best Practices 1.0: http://www.w3.org/TR/mobile-bp/
  9. W3C mobileOK Basic Tests 1.0: http://www.w3.org/TR/mobileOK-basic10-tests/
  10. Comparison of XHTML Mobile Profile and XHTML Basic: http://mobiforge.com/designing/story/comparison-xhtml-mobile-profile-and-xhtml-basic
  11. wikipedia: i-Mode
  12. NTT DoCoMo - iMode official site: http://www.nttdocomo.com/services/imode/
  13. W3C - WAP Binary XML Content Format: http://www.w3.org/TR/wbxml/
  14. WAP flap zaps spec credibility: http://www.allbusiness.com/legal/intellectual-property-patent/980415-1.html
  15. An introduction to meta viewport and @viewport: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
  16. Mobile Dimensions via CSS/META: http://www.yourhtmlsource.com/accessibility/mobile.html
  17. Viewports: http://www.quirksmode.org/mobile/viewports.html
  18. Table viewport: http://www.quirksmode.org/mobile/tableViewport.html
  19. Responsive Web Design: http://www.alistapart.com/articles/responsive-web-design/
  20. CSS contents and browser compatibility - mobile: http://quirksmode.org/m/css.html
  21. Sirens - CSS for adaptable content that responds to orientation changes: http://aaronmentele.com/2012/01/13/sirens-2/
  22. iPad 3 .vs. iPad 2 specs: http://www.apple.com/ipad/compare/
  23. Screen resolution - web usage statistics: http://www.webdevelopersnotes.com/design/web-screen-resolution-usage-statistics.php
  24. RIM PlayBook vs Apple iPad: http://www.knowyourmobile.com/comparisons/613275/rim_playbook_vs_apple_ipad.html
  25. Using the navigator object to detect client's browser: http://www.javascriptkit.com/javatutors/navigator.shtml
  26. Auto detect mobile browser (via user-agent?): http://stackoverflow.com/questions/1005153/auto-detect-mobile-browser-via-user-agent
  27. Browser detect: http://www.quirksmode.org/js/detect.html
  28. Lightweight Device-Detection in PHP: http://mobiforge.com/developing/story/lightweight-device-detection-php
  29. Mobile Device Detection and Redirection with PHP: http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
  30. iPhone Tester: http://www.iphonetester.com/
  31. iPad Simulator: http://www.ipadsimulator.info/
  32. WebTelephony API and WebSMS API – Part of WebAPI: http://hacks.mozilla.org/2012/03/webtelephony-api-and-websms-api-part-of-webapi/
  33. Delivering the right experience to the right device: http://www.filamentgroup.com/lab/delivering_the_right_experience_to_the_right_device/

See Also

Mobile Internet | Mobile | Web | Optimization