442 строки
22 KiB
HTML
Executable File
442 строки
22 KiB
HTML
Executable File
{{+bindTo:partials.standard_devtools_article}}
|
||
<h1>Device Mode & Mobile Emulation</h1>
|
||
<p>
|
||
As your mobile audience grows, responsive mobile-friendly web design becomes all the more important. Web content needs to look and feel great across a wide variety of devices and network conditions. But testing the quality of your mobile experiences takes longer and makes debugging more complex.
|
||
</p>
|
||
<p>
|
||
Device mode brings the insights of mobile testing to your browser tab through the power of mobile emulation.
|
||
</p>
|
||
|
||
<p>
|
||
<object width="425"
|
||
height="355">
|
||
<param name="movie"
|
||
value="https://www.youtube.com/v/FrAZWiMWRa4">
|
||
<param name="wmode"
|
||
value="transparent">
|
||
<embed src="https://www.youtube.com/v/FrAZWiMWRa4"
|
||
type="application/x-shockwave-flash"
|
||
wmode="transparent"
|
||
width="425"
|
||
height="355">
|
||
</object>
|
||
</p>
|
||
|
||
<p>You can use device mode to:</p>
|
||
<ul>
|
||
<li>Test your responsive designs by <a href="#screen-emulator">emulating different screen sizes and resolutions</a>, including Retina displays.</li>
|
||
<li>Evaluate your site's performance using the <a href="#network-conditions">network emulator</a>, without affecting traffic to other tabs.</li>
|
||
<li>Visualize and <a href="#media-queries">inspect CSS media queries</a>.</li>
|
||
<li>Accurately <a href="#device-sensors">simulate device input</a> for touch events, geolocation, and device orientation.</li>
|
||
<li>Enhance your current debugging workflow by combining device mode with the existing DevTools.</li>
|
||
</ul>
|
||
|
||
<p class="note">
|
||
<b>Note</b>: Some of this documentation might be ahead of the stable version of Chrome.
|
||
If you are unable to locate a feature, try using <a href="https://www.google.com/intl/en/chrome/browser/canary.html">Chrome Canary</a>, which contains the latest version of the DevTools.
|
||
</p>
|
||
|
||
<div class="collapsible">
|
||
<h2 id="enable-device-mode">Enabling device mode</h2>
|
||
<p>
|
||
Turn on device mode by pressing the <b>Toggle device mode</b> <img src="device-mode-files/icon-device-mode-off.png" alt="toggle device mode icon off"> icon.
|
||
When device mode is enabled, the icon turns blue and the viewport transforms into a device emulator.
|
||
</p>
|
||
<p>
|
||
You can also toggle device mode on and off using the keyboard shortcut:</br>
|
||
<kbd class="kbd">Ctrl</kbd>+<kbd class="kbd">Shift</kbd>+<kbd class="kbd">M</kbd> (or <kbd class="kbd">Cmd</kbd>+<kbd class="kbd">Shift</kbd>+<kbd class="kbd">M</kbd> on Mac).
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/device-mode-initial-view.png" alt="Initial start for device mode">
|
||
<figcaption>
|
||
The initial device mode view.
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="collapsible">
|
||
<h2 id="screen-emulator">Using the screen emulator</h2>
|
||
<p>
|
||
Device mode's screen emulator helps you test the responsiveness of your site, without the hassle of switching between multiple devices.
|
||
</p>
|
||
|
||
<div class="collapsible">
|
||
<h3 id="device-presets">Get started with device presets</h3>
|
||
<p>
|
||
To jump-start your debugging process, device mode has a variety of emulation presets. Quickly emulate a particular device by selecting a model from the preset dropdown.
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/device-and-network-tools.png" alt="device presets">
|
||
<figcaption>
|
||
Skip manual configuration by choosing from a list of popular device presets.
|
||
</figcaption>
|
||
</figure>
|
||
<p> Each preset automatically configures device emulation in the following ways:</p>
|
||
<ul>
|
||
<li>Specifies the <abbr title="User Agent">UA</abbr> string for requests.</li>
|
||
<li>Sets the device resolution and pixel ratio.</li>
|
||
<li>Enables touch emulation (if applicable).</li>
|
||
<li>Emulates mobile scrollbar overlays and meta viewport.</li>
|
||
<li>Autosizes (boosts) text for pages without a defined viewport.</li>
|
||
</ul>
|
||
<p>
|
||
<b>Tips:</b> Toggle the screen resolution emulator on and off using the <b>Emulate screen resolution</b> <img src="device-mode-files/icon-emulate-resolution.png" alt="emulate resolution icon"> checkbox. Alternate between portrait and landscape views by clicking the <b>Swap dimensions</b> <img src="device-mode-files/icon-swap-dimensions.png" alt="swap dimensions icon"> icon. Select the <b>Fit</b> checkbox to ensure that the emulated screen remains fully visible inside your browser viewport, shrinking to fit if necessary. (This setting is for convenience and does not emulate the device differently.)
|
||
</p>
|
||
</div>
|
||
|
||
<div class="collapsible">
|
||
<h3 id="customize-screen-settings">Customize the screen settings</h3>
|
||
<p>
|
||
To get more granular control over the screen emulator, you can tune the resolution settings below the device preset dropdown.
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/screen-controls.png" alt="screen controls">
|
||
<figcaption>
|
||
Customize the screen emulator by adjusting the screen resolution and device pixel ratio.
|
||
</figcaption>
|
||
</figure>
|
||
<p>
|
||
To emulate a custom screen size, manually set the CSS pixel dimensions of the device in the width and height fields.
|
||
</p>
|
||
<p>
|
||
If you want to emulate a Retina device from a non-Retina machine or vice versa, adjust the <b>Device pixel ratio</b> <img src="device-mode-files/icon-DPR.png" alt="emulate DPR icon"> field.
|
||
The <strong>device pixel ratio</strong> (DPR) is the ratio between logical pixels and physical pixels. Devices with Retina displays, such as the iPhone 5, have higher pixel density than standard devices, which can affect the sharpness and size of visual content.
|
||
</p>
|
||
<p>
|
||
Some examples of <abbr title="Device Pixel Ratio">DPR</abbr>-sensitivity on the web are:
|
||
</p>
|
||
<ul>
|
||
<li>CSS media queries such as <code>@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }</code></li>
|
||
<li>CSS <a href="http://dev.w3.org/csswg/css-images/#image-set-notation">image-set</a> rules.</li>
|
||
<li>The <a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-srcset">srcset</a> attribute on images.</li>
|
||
<li>The <code>window.devicePixelRatio</code> property.</li>
|
||
</ul>
|
||
<p class="note">
|
||
<b>Note: </b> If you have a native Retina display, you'll notice that low <abbr title="Dots Per Inch">dpi</abbr> assets look pixelated while higher-dpi assets are sharp. To simulate this effect on a standard display, set the <abbr title="Device Pixel Ratio">DPR</abbr> to 2 and scale the viewport by zooming. A 2x asset will continue to look sharp, while a 1x one will look pixelated.
|
||
</p>
|
||
</div>
|
||
|
||
<!--<div class="collapsible">
|
||
<h3 id="save-custom-presets">Save custom presets</h3>
|
||
<p>
|
||
Save custom emulations as presets so that you can easily return to them later.
|
||
</p>
|
||
<p>
|
||
To save your current screen settings as a preset, open the DevTools emulation drawer by clicking the <b>More overrides</b> <img src="device-mode-files/icon-open-emulator-drawer.png" alt="more overrides icon"> icon in the top right corner of the browser viewport.
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/emulation-drawer-UI-location.png" alt="opening the emulation drawer"/>
|
||
<figcaption>
|
||
Tip: You can also use the keyboard shortcut <kbd class="kbd">Esc</kbd> to open the emulation drawer.
|
||
</figcaption>
|
||
</figure>
|
||
<p>
|
||
In the device pane of the emulation drawer, click <b>Save as</b> and give your preset a name.
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/emulation-drawer-device.png" alt="sensors pane in the DevTools emulation drawer"/>
|
||
<figcaption>
|
||
The device pane.
|
||
</figcaption>
|
||
</figure>
|
||
<p>Now you can quickly select your custom screen emulation from the device preset dropdown.</p>
|
||
<p>
|
||
<b>Tip:</b> The emulation drawer contains the same controls as the main device mode interface, plus some extras (<a href="#more-media-types">media type</a> and <a href="#device-sensors">sensor </a>controls).
|
||
</p>
|
||
</div>
|
||
</div>-->
|
||
|
||
<div class="collapsible">
|
||
<h2 id="network-conditions">Emulating network connectivity</h2>
|
||
<p>
|
||
Optimizing your site's performance under varying network conditions is a key aspect of developing for a mobile audience.
|
||
</p>
|
||
<p>
|
||
Device mode's network conditioning allows you to test your site on a variety of network connections, including Edge, 3G, and even offline. Select a connection from the preset dropdown to apply network throttling and latency manipulation.
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/network-throttling.png" alt="network controls">
|
||
<figcaption>
|
||
Select from a list of network presets to apply conditioning.
|
||
</figcaption>
|
||
</figure>
|
||
<p>
|
||
Network throttling artificially limits the maximum download throughput (rate of data transfer). Latency manipulation enforces a minimum delay in connection (<abbr title="round-trip time">RTT</abbr>).
|
||
</p>
|
||
</div>
|
||
|
||
<div class="collapsible">
|
||
<h2 id="media-queries">Inspecting media queries</h2>
|
||
<p>
|
||
<a href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries">Media queries</a> are an essential part of responsive web design. Device mode makes media queries readily accessible and easy for you to inspect.
|
||
</p>
|
||
<style>video { width: 100%; }</style>
|
||
<figure>
|
||
<video class="gfyVid" controls autoplay loop muted style="display: block;" poster="//thumbs.gfycat.com/OilyHarmlessAffenpinscher-poster.jpg">
|
||
<source id="webmsource" src="//zippy.gfycat.com/OilyHarmlessAffenpinscher.webm" type="video/webm">
|
||
<source id="mp4source" src="//fat.gfycat.com/OilyHarmlessAffenpinscher.mp4" type="video/mp4">
|
||
<img src="http://zippy.gfycat.com/OilyHarmlessAffenpinscher.gif" alt="Inspecting media queries.">
|
||
</video>
|
||
</figure>
|
||
|
||
<p>
|
||
To view the media query inspector, click the <b>Media queries</b> <img src="device-mode-files/icon-media-query.png" alt="media queries icon"> icon in the upper left corner of the viewport. The DevTools detect media queries in your stylesheets and display them as colored bars in the top ruler.
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/media-query-inspector-ruler.png" alt="media query inspector">
|
||
<figcaption>
|
||
The media query inspector.
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<p>
|
||
Media queries are color-coded as follows:
|
||
</p>
|
||
|
||
<style>
|
||
#colortable { width: 60%; border: none; }
|
||
#colortable td { border: none; }
|
||
.max-width { background: #327ff2; width: 10%; }
|
||
.max-and-min { background: #3b9903; width: 10%; }
|
||
.min-width { background: #d4731f; width: 10%; }
|
||
</style>
|
||
|
||
<!-- TODO: Fix formatting of cells -->
|
||
<table id="colortable">
|
||
<tr>
|
||
<td class="max-width"></td>
|
||
<td>Queries targeting a maximum width.</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="max-and-min"></td>
|
||
<td>Queries targeting widths within a range.</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="min-width"></td>
|
||
<td>Queries targeting a minimum width.</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<div class="collapsible">
|
||
<h3 id="preview-styles">Preview screen styles</h3>
|
||
<p>
|
||
Click a media query bar to adjust the emulator resolution and preview styles for the targeted screen sizes.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="collapsible">
|
||
<h3 id="view-CSS">View CSS</h3>
|
||
<p>
|
||
Right-click a bar to view where the media query is defined in CSS and jump to the definition in source code.
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/reveal-source-code.png" alt="web fundamentals - media queries view">
|
||
<figcaption>
|
||
Use the media query inspector to preview styling and locate the source CSS.
|
||
</figcaption>
|
||
</figure>
|
||
<p>
|
||
<b>Tip:</b> As you work with the media query inspector, you might find that you don't always want to use the mobile emulator. To turn off mobile emulation without exiting device mode, click the <b>Reset all overrides</b> <img src="device-mode-files/icon-reset-overrides.png" alt="reset all overrides"> icon and refresh the page.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="collapsible">
|
||
<h3 id="more-media-types">Preview styles for more media types</h3>
|
||
<p>
|
||
The media query inspector targets styles intended for screens. If you want to preview styles for other media types, such as print, you can do so in the media pane of the emulation drawer.
|
||
</p>
|
||
<p>
|
||
Open the DevTools emulation drawer by clicking the <b>More overrides</b> <img src="device-mode-files/icon-open-emulator-drawer.png" alt="more overrides"> icon in the top right corner of the browser viewport. Then, select <b>Media</b> in the emulation drawer.
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/emulation-drawer-media.png" alt="media pane in the DevTools emulation drawer"/>
|
||
<figcaption>
|
||
The media pane.
|
||
</figcaption>
|
||
</figure>
|
||
<p>
|
||
Select the <b>CSS media</b> checkbox, and choose a media type from the dropdown list.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="collapsible">
|
||
<h2 id="device-sensors">Emulating device sensors</h2>
|
||
<p>
|
||
Because most desktops don't have touch screens, GPS chips, or accelerometers, these inputs can be difficult to test on your development machine. Device mode's sensor emulators reduce the overhead of testing by emulating common mobile device sensors.
|
||
</p>
|
||
<p>
|
||
To access the sensor controls, open the DevTools emulation drawer by clicking the <b>More overrides</b> <img src="device-mode-files/icon-open-emulator-drawer.png" alt="open emulation drawer"> icon in the top right corner of the browser viewport. Then, select <b>Sensors</b> in the emulation drawer.
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/emulation-drawer-sensors.png" alt="sensors pane in the DevTools emulation drawer"/>
|
||
<figcaption>
|
||
The sensors pane.
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<p class="note">
|
||
<b>Note:</b> If your app detects sensors onload using JavaScript (such as Modernizr), make sure that you reload the page after enabling sensor emulators.
|
||
</p>
|
||
|
||
<div class="collapsible">
|
||
<h3 id="touch-emulation">Trigger touch events</h3>
|
||
<p>
|
||
The touch screen emulator lets you accurately test touch events and sequences as if you were using a touch-enabled device.
|
||
</p>
|
||
<p>
|
||
Enable touch emulation by selecting the <b>Emulate touch screen</b> checkbox in the sensors pane of the emulation drawer.
|
||
</p>
|
||
<p>
|
||
When you interact with the emulated viewport, the cursor changes into a fingertip-sized circle and touch events (such as <code>touchstart</code>, <code>touchmove</code>, and <code>touchend</code>) fire as they would on a mobile device.
|
||
</p>
|
||
|
||
<p class="note">
|
||
<b>Note</b>: To trigger <code>elem.ontouch<i>*</i></code> handlers, you must run Chrome with the <code>‑‑touch‑events</code> <a href="http://www.chromium.org/developers/how-tos/run-chromium-with-flags">command line flag</a>. Touch emulation currently <a href="https://code.google.com/p/chromium/issues/detail?id=133915">does not trigger</a> these handlers by default.
|
||
</p>
|
||
|
||
<figure>
|
||
<video class="gfyVid" controls autoplay loop muted poster='//thumbs.gfycat.com/DiligentEducatedAfricanhornbill-poster.jpg'>
|
||
<source id="webmsource" src="//zippy.gfycat.com/DiligentEducatedAfricanhornbill.webm" type="video/webm">
|
||
<source id="mp4source" src="//fat.gfycat.com/DiligentEducatedAfricanhornbill.mp4" type="video/mp4">
|
||
<img src="http://zippy.gfycat.com/DiligentEducatedAfricanhornbill.gif" alt="Emulating pinch to zoom">
|
||
</video>
|
||
<figcaption>
|
||
<b>Tip:</b> Hold <kbd class="kbd">Shift</kbd> while dragging the mouse to emulate a pinch gesture.
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<p>
|
||
Because mouse events can still fire on touch devices, the touch emulator does not disable mouse events entirely.
|
||
</p>
|
||
|
||
<div class="collapsible">
|
||
<h4 id="multi-touch">Simulate multi-touch</h4>
|
||
<p>
|
||
You can simulate multi-touch events on devices that support multi-touch input, such as laptops with trackpads. For more information about setting up multi-touch simulation, see the "Developer Tools" section of the Multi-touch web development guide <a href="http://www.html5rocks.com/en/mobile/touch/#toc-touchdev">on HTML5 Rocks</a>.
|
||
</p>
|
||
|
||
<p>
|
||
<b>Tip:</b> Try out the DevTools debugger in combination with touch emulation using this <a href="http://www.paulirish.com/demo/multi">fingerpaint touch screen demo</a>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="collapsible">
|
||
<h3 id="geolocation">Override geolocation data</h3>
|
||
<p>
|
||
Unlike desktops, mobile devices commonly use GPS hardware to detect location. In device mode, you can simulate geolocation coordinates to use with the <a href="http://www.w3.org/TR/geolocation-API/">Geolocation API</a>.
|
||
</p>
|
||
<p>
|
||
Enable the geolocation emulator by selecting the <b>Emulate geolocation coordinates</b> checkbox in the sensors pane of the emulation drawer.
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/emulation-drawer-geolocation.png" alt="geolocation emulator enabled"/>
|
||
<figcaption>
|
||
Geolocation emulator enabled.
|
||
</figcaption>
|
||
</figure>
|
||
<p>
|
||
You can use this emulator to override position values for <code>navigator.geolocation</code>, as well as simulate cases when geolocation data is unavailable.
|
||
</p>
|
||
<p>
|
||
<b>Tip:</b> Try out the geolocation emulator using this <a href="http://html5demos.com/geo">maps demo</a>.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="collapsible">
|
||
<h3 id="device-orientation">Simulate device orientation</h3>
|
||
<p>
|
||
If you need to test accelerometer data used with the <a href="http://www.w3.org/TR/screen-orientation/">Orientation API</a>, you can simulate the data using the accelerometer emulator.
|
||
</p>
|
||
<p>
|
||
Enable the accelerometer emulator by selecting the <b>Accelerometer</b> checkbox in the sensors pane of the emulation drawer.
|
||
</p>
|
||
<figure>
|
||
<img src="device-mode-files/emulation-drawer-accelerometer.png" alt="Accelerometer control">
|
||
</figure>
|
||
<p>
|
||
You can manipulate the following orientation parameters:
|
||
</p>
|
||
<dl>
|
||
<dt><b><abbr title="alpha">α</abbr></b></dt>
|
||
<dd>Rotation around the <em>z</em>-axis.</dd>
|
||
<dt><b><abbr title="beta">β</abbr></b></dt>
|
||
<dd>Left-to-right tilt.</dd>
|
||
<dt><b><abbr title="gamma">γ</abbr></b></dt>
|
||
<dd>Front-to-back tilt.</dd>
|
||
</dl>
|
||
<p>
|
||
You can also click and drag the model accelerometer to the desired orientation.
|
||
</p>
|
||
<p>
|
||
<b>Tip:</b> Try out the accelerometer emulator using this <a href="http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html">device orientation demo</a>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="collapsible">
|
||
<h2 id="custom-devices">Custom Devices</h2>
|
||
<p>
|
||
Device Mode offers a wide array of devices for emulation.
|
||
You can add a custom device if you find an edge-case or niche device that isn't covered.
|
||
To add a custom device do the following:
|
||
</p>
|
||
<ol>
|
||
<li>Go to the DevTools Settings.</li>
|
||
<li>Activate the Devices tab.</li>
|
||
<li>Click on the "Add custom device" button at the bottom of the panel.</li>
|
||
<li>Fill in the form that appears at the top of the list.</li>
|
||
<li>Press "Add Device"</li>
|
||
<li>Enable Device Mode and find your custom device in the device menu.</li>
|
||
</ol>
|
||
<figure>
|
||
<img src="device-mode-files/custom-device-settings.png" alt="Adding a custom device">
|
||
<figcaption>
|
||
Adding a device to emulate Googlebot.
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="collapsible">
|
||
<h2 id="limitations">Limitations</h2>
|
||
<p>
|
||
Although Chrome's device mode offers many powerful emulation tools, it does have some limitations. Currently known issues are described below.
|
||
</p>
|
||
|
||
<ul>
|
||
<li><b>Device hardware</b>
|
||
<ul>
|
||
<li>GPU and CPU behavior are not emulated.</li>
|
||
</ul>
|
||
</li>
|
||
<li><b>Browser UI</b>
|
||
<ul>
|
||
<li>System displays, such as the address bar, are not emulated.</li>
|
||
<li>Native displays, such as <code><select></code> elements, are not emulated as a modal list.</li>
|
||
<li>Some enhancements, such as number inputs opening a keypad, might vary from actual device behavior.</li>
|
||
</ul>
|
||
</li>
|
||
<li><b>Browser functionality</b>
|
||
<ul>
|
||
<li>WebGL operates in the emulator, but is not supported on iOS 7 devices.</li>
|
||
<li>MathML is not supported in Chrome, but is supported on iOS 7 devices.</li>
|
||
<li>The <a href="https://github.com/scottjehl/device-bugs/issues/2">iOS 5 orientation zoom bug</a> is not emulated.</li>
|
||
<li>The line-height CSS property operates in the emulator, but is not supported in Opera Mini.</li>
|
||
<li>CSS rule limits, such as those in <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx">Internet Explorer</a>, are not emulated.</li>
|
||
</ul>
|
||
</li>
|
||
<li><b>AppCache</b>
|
||
<ul>
|
||
<li>The emulator does not override the <abbr title="User Agent">UA</abbr> for AppCache <a href="https://code.google.com/p/chromium/issues/detail?id=334120">manifest files</a> or <a href="https://code.google.com/p/chromium/issues/detail?id=119767">view source requests</a>.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<p>
|
||
Despite these limitations, the device mode emulators are robust enough for most tasks. When you need to test on a real device, you can use the <a href="remote-debugging">remote debugging</a> DevTools for additional insight.
|
||
</p>
|
||
</div>
|
||
|
||
{{/partials.standard_devtools_article}}
|