Chrome for Android v30 and later can connect via USB cable to Chrome on your desktop and utilize it’s dev tools with the use of the ADB browser extension in the desktop browser.
Safari on iOS 6+ can do the same via Safari desktop’s Web Inspector if:
<a href="sms:">Launch Messages App</a>
<a href="sms:1-408-555-1212">New SMS Message</a>
Spoken Global Number +1 (310) RUNE-IMP Ext:69
1
2=ABC
3=DEF
4=GHI
5=JKL
6=MNO
7=PQRS
8=TUV
9=WXYZ
0
/* none | course | fine */
@media (pointer:coarse){
height: 150%;
width: 150%;
}
@media (pointer:fine){
height: 80%;
width: 80%;
}
| Browser | Zoom Enabled | Zoom Disabled | Notes |
|---|---|---|---|
| Amazon Kindle Fire (WebKit) | static | OK | - |
| Amazon Kindle Fire (Netfront) | OK | OK | - |
| Android 3.1 (Honeycomb) | jitter | jitter | - |
| Android 2.3 | static | OK | - |
| Android 2.2 | snaps | snaps | - |
| Android 2.1 | None | None | - |
| BlackBerry PlayBook 1.0.7 (WebKit) | OK | OK | Seems as if the text inside the fixed element is a BITMAP; fuzzy and jagged. |
| BlackBerry 7.0 (WebKit) | OK | OK | - |
| BlackBerry 6.0 | snap | snap | - |
| BlackBerry 5.0 | jittery | jittery | - |
| Firefox Mobile 6.0 | OK | OK | - |
| Firefox Mobile 5.x | snap | snap | - |
| HP TouchPad | animate | animate | Looks janky |
| iOS 5 Mobile Safari | OK | OK | BUG: † |
| iOS 4 Mobile Safari | static | static | - |
| Nokia N9 (MeeGo) | static | static | - |
| Nook Color (1st and 2nd gen) | static | OK | - |
| Opera Mobile ? | snap | snap | Positioning calculations are sometimes incorrect. |
| Opera Mini ? | None | None | - |
| WebOS 1.4 | animate | animate | Looks janky |
| Windows Phone 7.5 (Mango) | static | static | - |
| Windows Phone 7 | static | static | - |
animate – Element animates into place.
jittery – Fixed elements jitter while scrolling but stay in place.
snaps – Snaps into place after scrolling is complete.
static – position:fixed; equals position:static;
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.scrollable section {
padding-top: 0;
height: 364px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
-webkit-overflow-scrolling: auto;// Continuous onscroll event but no momentum
// @see http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/#comment-461809
}
</style>
<meta name="HandheldFriendly" content="true" /><!-- true or false -->
<!--
true means the content is already designed for small screens and
should not be further enhanced by the system
-->
MS Layout Meta Tag - Windows Mobile 6.5 2010-04-08
Default fit-to-screen layout is 640px.
| Screen Size | Platform |
|---|---|
content="176" |
Windows Mobile Standard |
content="240" |
Windows Mobile Professional and Windows Mobile Classic (suggested setting for these platforms) |
content="320" |
Windows Mobile Professional and Windows Mobile Classic (high DPI) |
<meta name="MobileOptimized" content="320" /><!-- Base width -->
| Viewport Property | Notes |
|---|---|
width |
Sets the width of the viewport, in pixels, or the keyword device-width, which means whatever the width of the device screen is. The range is from 320 to 10,000. |
height |
Sets the height of the viewport, in pixels, or the keyword device-height. The range is from 480 to 10,000. |
user-scalable |
Indicates whether or not the user can scale the viewport, or in other words whether or not they can zoom in and out within content. Values can be yes or no. The default and recommended value is yes. |
initial-scale |
Sets the initial scale of the Viewport*. Allowable values are 0.1 to 10.0 |
minimum-scale |
Sets the minimum allowable scale of the Viewport*. Allowable values are 0.1 to 10.0 |
maximum-scale |
Sets the maximum allowable scale of the Viewport*. Allowable values are 0.1 to 10.0 |
*Note: In the initial release, IE Mobile for Windows Phone 7 does not support initial-scale, maximum-scale, or minimum-scale.
Managing the browser viewport in Windows Phone 7
device-width should equal 480px but defaults to 320px in portrait mode.
Order of importance ascending. Should be the same for all mobile browsers. Not just IE Mobile.
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no"><!-- Dissable telephone number detection -->
<link rel="apple-touch-startup-image" href="/startup.png"><!-- 320x460 -->
Visual Viewport (screen) > Layout Viewport > Page
| Phone Browser | Default Layout Viewport Width | HandheldFriendly = true | MobileOptimized = 320 | MobileOptimized = ANY |
|---|---|---|---|---|
| iOS Mobile Safari | 980px 33% | 980px 33% | 980px 33% | 980px 33% |
| Android Mobile Safari | 800px / 800px 100% | 360px / 640px 100% | 360px / 640px | 360px / 640px |
| Android Firefox Mobile | 800px / 800px | 800px / 800px | 800px / 800px | 800px / 800px |
| Android Opera Mobile | 980px (360px) / 980px (640px) | 980px (360px) / 980px (640px) | ignored | ignored |
| Android Opera Mini | - | - | - | - |
| Opera Mobile | 850px | - | - | - |
| Symbian WebKit | LV = VV. Max VV is 850px | - | - | - |
| Bada WebKit | width of widest element | - | - | - |
| BlackBerry | LV = VV. 100% zoom. 465px | - | - | - |
| Windows Phone 7 | 1024px | - | - | - |
| Windows Mobile - IE | 974px | - | - | - |
| Phone Browser | viewport width=device-width | viewport width=device-width, initial-scale=1 | viewport width=320 |
|---|---|---|---|
| iOS Mobile Safari | 320px (winIW: 401px, docW: 401px) / 320px (winIW: 401px, docW: 401px) 80% | 320px (winIW: 320px, docW: 401px) 100% / 480px (winIW: 480px, docW: 636px) 67% | - |
| Android Mobile Safari | 360px / 640px 100% | 360px / 640px | - |
| Android Firefox Mobile | 800px / 800px | 360px / 640px | 320px / 320px |
| Android Opera Mobile | 360px / 640px | - | 320px (333px) / 320px (333px) |
| Android Opera Mini | - | - | - |
| Opera Mobile | - | - | - |
| Symbian WebKit | - | - | - |
| Bada WebKit | - | - | - |
| BlackBerry | - | - | - |
| Windows Phone 7 | - | - | - |
| Windows Mobile - IE | - | - | - |
| Phone Browser | viewport width=700 | viewport initial-scale=1 | viewport width=320, initial-scale=1 | viewport width=700, initial-scale=1 |
|---|---|---|---|---|
| Android Firefox Mobile | 700px / 700px | 360px / 640px | 360px / 640px | 700px / 700px |
| Android Opera Mobile | 700px (360px) / 700px (640px) | - | - | 700px (360px) / 700px (640px) |
Values in parenthesis refer to window.innerWidth.
winIW = window.innerWidth
docW = $(document).width()
LV = Layout Viewport
VV = Visual Viewport
iOS Mobile Safari – iPod Touch 3rd Generation. iOS 5.0.1. WebKit/534.46 Version/5.1 Mobile/9A405 Safari/7534.48.3 Screen: HVGA – 320x480
Android * – HTC Amaze 4G. Android 2.3.4. AppleWebKit/533.1 Version/4.0 Mobile Safari/533.1. Screen: qHD – 540x960. Pixel Ratio: 1.5.
Apple Technical Note TN2262: Preparing Your Web Content for iPad
| Tablet | Screen Size | Screen Resolution | OS | Price | Notes |
|---|---|---|---|---|---|
| Sony Tablet P | 5.5″ × 2 | 1024×480 | Android 3.x | - | 1GB RAM, 4GB ROM, microSD (2GB/32GB) Expandable, TruBlack Display, NVIDIA Tegra Processor, folding split screen |
| Acer Iconia | 10.1″ | 1280×800 | Android | - | - |
| ASUS TF101 Eee Pad Transformer | 10.1″ | 1280×800 | Android 3.0 | - | - |
| Motorola Xoom | 10.1″ | 1280×800 | Android | - | - |
| Samsung Galaxy Tab 10.1 | 10.1″ | 1280×800 | Android | - | - |
| Toshiba Thrive | 10.1″ | 1280×800 | Android | - | - |
| HP Touchpad | 9.7″ | 1024×768 | webOS | - | - |
| iPad | 9.7″ | 1024×768 | iOS | - | - |
| iPad 2 | 9.7″ | 1024×768 | iOS | - | - |
| iPad 3 | 9.7″ | 2048×1526 | iOS | - | Retina Display |
| Sony Tablet S | 9.4″ | 1280×800 | Android 3.x | 16GB $399.99 32GB $499.99 |
1GB RAM, 16GB/32GB ROM, SD Slot for transfer, TruBlack Display, NVIDIA Tegra2 Processor, Camera 0.3/5 MP |
| LG Optimum | 8.9″ | 1280×768 | Android | - | - |
| Visio VTAB1008 | 8″ | 1024×768 | Android 2.3.2 | - | 2GB? |
| BlackBerry PlayBook | 7″ | 1024×600 | QNX | - | - |
| HTC Flyer | 7″ | 1024×600 | Android | - | - |
| Samsung Galaxy Tab (original) | 7″ | 1024×600 | Android | - | - |
| Dell Streak | 7″ | 800×480 | Android | - | - |
| Viewsonic Viewpad | 7″ | 800×480 | Android | - | - |
| _____ | ___″ | 1024×768 | Android | - | - |