More content fixes
This commit is contained in:
Arthur Evans
Родитель
f7914e40c5
Коммит
7e87888809
|
|
@ -1,5 +1,9 @@
|
|||
{{+bindTo:partials.standard_multidevice_article}}
|
||||
|
||||
<style>
|
||||
dd { margin: 0 6px 12px 40px; }
|
||||
</style>
|
||||
|
||||
<h1>Add to Homescreen</h1>
|
||||
|
||||
<div>
|
||||
|
|
@ -50,7 +54,7 @@ however, they integrate with the Android environment in the following ways.</p>
|
|||
<div style="clear:left"></div>
|
||||
|
||||
<div class="collapsible">
|
||||
<h2 id="supporting">Supporting add to homescreen apps</h2>
|
||||
<h2 id="supporting">Supporting Add to homescreen apps</h2>
|
||||
|
||||
<p>Chrome will look for the following meta tag in the <code><head></code> element of the web-page:</p>
|
||||
|
||||
|
|
@ -79,6 +83,7 @@ however, they integrate with the Android environment in the following ways.</p>
|
|||
|
||||
<p>The following example is the minimum required configuration to support a homescreen launch experience.</p>
|
||||
|
||||
<pre>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
|
@ -89,11 +94,12 @@ however, they integrate with the Android environment in the following ways.</p>
|
|||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
</pre>
|
||||
|
||||
</div><div class="collapsible">
|
||||
<h2 id="comparison-to-ios">Comparison to iOS Safari Add to Homescreen</h2>
|
||||
<h2 id="comparison-to-ios">Comparison to iOS Safari Add to homescreen</h2>
|
||||
|
||||
<p>Chrome will also allow Web Apps to launch in "App mode" if they embed a meta tag using the "apple-mobile-web-app-capable" name. Chrome will stop supporting this usage in an upcoming release. Chrome currently shows a deprecation warning in the Developer Tools’ console log when it detects a page with only the "apple-mobile-web-app-capable" meta tag. The warning appears as follows:</p>
|
||||
<p>Chrome will also allow web apps to launch in "App mode" if they embed a meta tag using the "apple-mobile-web-app-capable" name. Chrome will stop supporting this usage in an upcoming release. Chrome currently shows a deprecation warning in the Developer Tools’ console log when it detects a page with only the "apple-mobile-web-app-capable" meta tag. The warning appears as follows:</p>
|
||||
|
||||
<img src="/multidevice/images/home_warning.png" style="width: 75%; height: 75%" />
|
||||
|
||||
|
|
@ -110,13 +116,15 @@ however, they integrate with the Android environment in the following ways.</p>
|
|||
|
||||
<dl>
|
||||
<dt>How do I open links in the user’s browser?</dt>
|
||||
<dd>As you would on the web, adding target=_blank to an anchor will force the user out of the web app and into the browser that the user added the icon from.</dd>
|
||||
<dd>As you would on the web, adding <code>target="_blank"</code> to an anchor forces the user out of the
|
||||
web app and into the browser that the user added the icon from.</dd>
|
||||
|
||||
<dt>Will this work on Chrome for iOS?</dt>
|
||||
<dt>Does Add to homescreen work on Chrome for iOS?</dt>
|
||||
<dd>No.</dd>
|
||||
|
||||
<dt>If I visit a page that I have already added to the home screen, will it be full screen?</dt>
|
||||
<dd>No, whilst you are browsing you will remain in the browser regardless of the fact your web app might be added to the home screen. The page will only launch full screen when launched from the homescreen.</dd>
|
||||
<dt>If I visit a page that I have already added to the homescreen, will it be full screen?</dt>
|
||||
<dd>No, while you are browsing you remain in the browser even if you visit a page that's
|
||||
added to your homescreen. The page only launches full screen when launched from the homescreen.</dd>
|
||||
|
||||
<dt>How can I detect if the app is running as an installed app?</dt>
|
||||
<dd>You can’t, directly.</dd>
|
||||
|
|
@ -128,9 +136,10 @@ however, they integrate with the Android environment in the following ways.</p>
|
|||
<ul>
|
||||
<li>Do not prompt the user to add your app to the homescreen. There is no way to detect if the app is running installed or not.</li>
|
||||
<li>Use the large 196px icon format, as in <code><link rel="shortcut icon" sizes="196x196" href="nice-highres.png"></code> for the highest quality homescreen icons.</li>
|
||||
<li>Use a noun in your document’s title with no temporal information.</li>
|
||||
<li>Use a noun in your document’s title. Make sure the title doesn't contain any information that may change.
|
||||
For example, for a Calendar app, don't include the current date or time in the app title.<li>
|
||||
<li>Use <a href="http://docs.webplatform.org/wiki/apis/appcache/ApplicationCache">AppCache</a> to ensure that your app works or presents the user with an experience when they are offline.</li>
|
||||
<li>Create a clear icon for use on the home screen following the guidance of <a href="http://developer.android.com/design/style/iconography.html#launcher">Android Iconography</a>.</li>
|
||||
<li>Create a clear icon for use on the homescreen following the guidance of <a href="http://developer.android.com/design/style/iconography.html#launcher">Android Iconography</a>.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,33 +24,10 @@
|
|||
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=84186">Text auto-sizing</a>, also known as font boosting
|
||||
</ul>
|
||||
|
||||
<p>With these improvements, Chrome for Android enables interactive mobile web experiences, as illustrated in these snapshots:</p>
|
||||
|
||||
<div class="foo">
|
||||
<p>
|
||||
<style>
|
||||
.foo img {
|
||||
float: left;
|
||||
width: 180px;
|
||||
margin: 0 10px 20px 0;
|
||||
}
|
||||
div.clr { clear: both; }
|
||||
</style>
|
||||
|
||||
<img src="/multidevice/images/samples/gmail.png"/>
|
||||
<img src="/multidevice/images/samples/soundcloud.png"/>
|
||||
<img src="/multidevice/images/samples/grooveshark.png"/>
|
||||
<img src="/multidevice/images/samples/twitter.png"/>
|
||||
<img src="/multidevice/images/samples/workflowy.png"/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="clr"></div>
|
||||
<p>With these improvements, Chrome for Android enables interactive mobile web experiences.</p>
|
||||
|
||||
<p>See all the <a href="http://www.google.com/intl/en/chrome/android/features.html">Chrome for Android features</a> such as tabs, incognito mode, and sync across devices for the user's Google account.</p>
|
||||
|
||||
<p>Enter <code>chrome://about</code> in the Chrome address bar to see more information about Chrome features.</li>
|
||||
|
||||
</div><div class="collapsible">
|
||||
<h2 id="performance">Performance</h2>
|
||||
|
||||
|
|
@ -68,14 +45,14 @@
|
|||
<p>Debugging web pages on the small screen is difficult. There's just not enough real estate to inspect elements and resources on the device. Now you can debug mobile web sites with the full suite of <a href="/devtools/index.html">Chrome Developer Tools</a> running on a desktop browser that's connected to your phone via USB. See <a href="/devtools/docs/remote-debugging.html">Remote Debugging</a> for further details.</p>
|
||||
|
||||
<p>In addition to the powerful Chrome Developer Tools, Chrome for Android
|
||||
provides more advanced developer features:</p>
|
||||
provides more advanced developer features for very specific use cases:</p>
|
||||
<ul>
|
||||
<li>GPU diagnostics: <code>chrome://gpu-internals</code></li>
|
||||
<li>GPU diagnostics: <code>chrome://gpu</code></li>
|
||||
<li>AppCache debugging: <code>chrome://appcache-internals</code></li>
|
||||
<li>Net stack debugging: <code>chrome://net-internals</code></li>
|
||||
</ul>
|
||||
|
||||
<p>You can also use the <a href="http://docs.webplatform.org/wiki/apis/resource_timing">Resource Timing</a> and <a href="http://docs.webplatform.org/wiki/apis/user_timing">User Timing</a> APIs to analyze application performance.</p>
|
||||
<p>You can also use the <a href="http://docs.webplatform.org/wiki/apis/resource_timing">Resource Timing</a> and <a href="http://www.html5rocks.com/en/tutorials/webperformance/usertiming/">User Timing</a> APIs to analyze application performance.</p>
|
||||
|
||||
</div><div class="collapsible">
|
||||
<h2 id="offline">Working offline</h2>
|
||||
|
|
@ -99,7 +76,8 @@ HTML5 features that address this concern, including:</p>
|
|||
</div><div class="collapsible">
|
||||
<h2 id="standards">Standards and APIs</h2>
|
||||
|
||||
<p>Chrome for Android supports HTML5 development with many features.</p>
|
||||
<p>Chrome for Android supports modern web standards. This section presents a sampling of features;
|
||||
for an updated view of features per Chrome release, see <a href="chromestatus.com">chromestatus.com</a>.
|
||||
|
||||
<h3 id="css">CSS and presentation</h3>
|
||||
|
||||
|
|
@ -111,7 +89,7 @@ HTML5 features that address this concern, including:</p>
|
|||
<li>The <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes">Flexbox</a> layout model is fully supported (prefixed as -webkit-flex)</li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/length">Viewport units</a>, <code>vh</code>, <code>vmin</code>, and <code>vw</code> for responsive design</li>
|
||||
<li><a href="http://docs.webplatform.org/wiki/css/atrules/@supports">@supports</a> conditional blocks to test whether Chromium supports certain property/value pairs</li>
|
||||
<li>The <a href="https://plus.google.com/+EricBidelman/posts/bbK5scDoPnc">:unresolved CSS pseudo-class</a> that lets you style a custom element that hasn’t been registered in the browser yet (custom elements are part of the <a href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html#introduction">Web Components</a> standard in development)</li>
|
||||
<li>The <a href="http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#fouc">:unresolved CSS pseudo-class</a> that lets you style a custom element that hasn’t been registered in the browser yet (custom elements are part of the <a href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html#introduction">Web Components</a> standard in development)</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="elements">Elements</h3>
|
||||
|
|
@ -145,7 +123,7 @@ contextual surroundings, from location and device orientation to camera access.
|
|||
<li><a href="http://www.html5rocks.com/en/tutorials/speed/animations/">requestAnimationFrame</a> to achieve optimum animation performance</li>
|
||||
<li>Interactive communication between server and client with <a href="https://developer.mozilla.org/en-US/docs/WebSockets">WebSockets</a>.</li>
|
||||
<li>Multi-threading with <a href="http://www.html5rocks.com/en/tutorials/workers/basics/">Web Workers</a> (dedicated only)</li>
|
||||
<li><a href="http://docs.webplatform.org/wiki/dom/methods/requestFullscreen">requestFullscreen</a> method (presently via the prefixed call, <code>webkitRequestFullScreen()</code>) to allow you to hide the browser UI (chrome)</li>
|
||||
<li><a href="http://www.html5rocks.com/en/mobile/fullscreen/#toc-request">requestFullscreen</a> method (presently via the prefixed call, <code>webkitRequestFullScreen()</code>) to allow you to hide the browser UI (chrome)</li>
|
||||
<li><a href="http://docs.webplatform.org/wiki/apis/webrtc">WebRTC</a> for real-time communication without a plug-in</li>
|
||||
<li><a href="http://docs.webplatform.org/wiki/apis/webaudio">WebAudio</a> to process and synthesize audio signals</li>
|
||||
<li>Experimental support (via <code>chrome://flags</code> in the Chrome address bar) for the following APIs:
|
||||
|
|
@ -178,7 +156,7 @@ star the ones you need the most. If you find a new issue, log it using
|
|||
</div><div class="collapsible">
|
||||
<h2 id="feedback">Share your thoughts</h2>
|
||||
|
||||
<p>If you run into a mobile web development problem and would like help, please post it to <a href="http://stackoverflow.com/questions/tagged/google-chrome+android">Stack Overflow</a> using the <a href="http://stackoverflow.com/questions/tagged/google-chrome">[google-chrome]</a> and <a href="http://stackoverflow.com/questions/tagged/android">[android]</a> tags.</p>
|
||||
<p>If you run into a mobile web development problem and would like help, please post it to <a href="http://stackoverflow.com/questions/tagged/google-chrome+android">Stack Overflow</a> using the <code>[google-chrome]</code> and <code>[android]</code> tags.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -50,20 +50,18 @@ you're done, click <strong>Next</strong>.</p>
|
|||
|
||||
<p><img src="/multidevice/images/webview/projectwizard2.png"/> </p></li>
|
||||
<li><p>The next page lets you select the main Android activity for your application.
|
||||
For the purposes of this guide, select <strong>Blank Activity **and click **Next</strong>.</p>
|
||||
For the purposes of this guide, select <strong>Blank Activity</strong> and click <strong>Next</strong>.</p>
|
||||
|
||||
<p><img src="/multidevice/images/webview/projectwizard3.png"/> </p>
|
||||
|
||||
<p><strong>Note:</strong> An Android
|
||||
<a href="http://developer.android.com/reference/android/app/Activity.html">Activity</a> can
|
||||
<p><strong>Note:</strong> An Android Activity can
|
||||
be viewed as a screen of an app. In this case, the application's main activity
|
||||
will hold the web view. If you're planning to venture further into native
|
||||
Android development, you can find more information in the
|
||||
<a href="http://developer.android.com/guide/components/activities.html](http://developer.android.com/guide/components/activities.html">
|
||||
<a href="http://developer.android.com/guide/components/activities.html">
|
||||
Android Activities API guide</a></p></li>
|
||||
<li><p>The next page lets you change the names for the default
|
||||
<a href="http://developer.android.com/guide/components/activities.html">Activity</a> and
|
||||
layout. Click <strong>Finish</strong> to accept the defaults and create the project.</p>
|
||||
Activity and layout. Click <strong>Finish</strong> to accept the defaults and create the project.</p>
|
||||
|
||||
<p><img src="/multidevice/images/webview/projectwizard4.png"/> </p>
|
||||
|
||||
|
|
@ -230,7 +228,7 @@ line to the end of the <code>onCreate</code> method.</p>
|
|||
(AVD or Android Virtual Device) by going to <strong>Tools</strong> >
|
||||
<strong>Android</strong> > <strong>AVD Manager</strong>.</p>
|
||||
|
||||
<!-- <img src="/chrome/mobile/images/webview/html5test.jpg" alt=""/> --></li>
|
||||
<img src="/multidevice/images/webview/html5test.jpg" alt=""/>
|
||||
</ol>
|
||||
|
||||
<p><strong>Note:</strong> To detect when a URL has started and finished loading,
|
||||
|
|
@ -284,19 +282,19 @@ mWebView.setWebViewClient(new WebViewClient());
|
|||
<p>This is a good step forward, but what if you want to handle links for your site
|
||||
only, while opening other URLs in a browser?</p>
|
||||
|
||||
<p>To achieve this you need to extend the `WebViewClient` class and implement the
|
||||
`shouldOverrideUrlLoading` method. This method is called whenever the WebView
|
||||
<p>To achieve this you need to extend the <code>WebViewClient</code> class and implement the
|
||||
<code>shouldOverrideUrlLoading</code> method. This method is called whenever the WebView
|
||||
tries to navigate to a different URL. If it returns false, the WebView opens the
|
||||
URL itself. (The default implementation _always_ returns false, which is why it
|
||||
URL itself. (The default implementation <em>always</em> returns false, which is why it
|
||||
works in the previous example.)</p>
|
||||
|
||||
<p>Create a new class:</p>
|
||||
|
||||
<ol>
|
||||
<li>Right-click the package name of your app and select **New** > **Java Class**.
|
||||
<li>Right-click the package name of your app and select <strong>New</strong> > <strong>Java Class</strong>
|
||||
<img src="/multidevice/images/webview/new-java-class.png"/></li>
|
||||
<li>Enter `MyAppWebViewClient` as the class name and click **OK**.</li>
|
||||
<li><p>In the new `MyAppWebViewClient.java` file, add the following code (changes
|
||||
<li>Enter <code>MyAppWebViewClient</code> as the class name and click <strong>OK</strong></li>
|
||||
<li><p>In the new <code>MyAppWebViewClient.java</code> file, add the following code (changes
|
||||
shown in bold):</p>
|
||||
|
||||
<pre>public class MyAppWebViewClient <strong>extends WebViewClient</strong> {
|
||||
|
|
@ -314,23 +312,23 @@ works in the previous example.)</p>
|
|||
}
|
||||
</pre>
|
||||
|
||||
<p>The new code defines `MyAppWebViewClient` as a subclass of `WebViewClient` and
|
||||
<p>The new code defines <code>MyAppWebViewClient</code> as a subclass of <code>WebViewClient</code> and
|
||||
implements the <code>shouldOverrideUrlLoading</code> method.</p>
|
||||
|
||||
<p>The `shouldOverrideUrlLoading` method is called whenever the WebView is about to load a URL.
|
||||
<p>The <code>shouldOverrideUrlLoading</code> method is called whenever the WebView is about to load a URL.
|
||||
This implementation checks for the String "html5rocks.com" at the end of the
|
||||
host name of the URL. If the string exists, the method returns
|
||||
false, which tells the platform **not** to override the URL, but to load it in the
|
||||
false, which tells the platform <strong>not</strong> to override the URL, but to load it in the
|
||||
WebView.</p>
|
||||
|
||||
<p>For any other hostname, the method makes a request to the system to open the URL. It does
|
||||
this by creating a new Android
|
||||
[Intent](http://developer.android.com/reference/android/content/Intent.html) and using it
|
||||
<a href="http://developer.android.com/reference/android/content/Intent.html">Intent</a> and using it
|
||||
to launch a new activity. Returning true at the end of the method prevents the URL from
|
||||
being loaded into the WebView.</p></li>
|
||||
<li><p>To use your new custom
|
||||
[WebViewClient](http://developer.android.com/reference/android/webkit/WebViewClient.html), add
|
||||
the following lines to your `MainActivity` class:</p>
|
||||
<a href="http://developer.android.com/reference/android/webkit/WebViewClient.html">WebViewClient</a>, add
|
||||
the following lines to your <code>MainActivity</code> class:</p>
|
||||
|
||||
<pre><strong>// Stop local links and redirects from opening in browser instead of WebView
|
||||
mWebView.setWebViewClient(new MyAppWebViewClient());
|
||||
|
|
@ -343,10 +341,10 @@ works in the previous example.)</p>
|
|||
<h3 id="handling_the_back_button">Handling the Android Back Button</h3>
|
||||
|
||||
<p>As you start playing around and navigating the awesome HTML5Rocks articles,
|
||||
hitting the back button on Android exits the application, even though we've
|
||||
hitting the back button on Android exits the application, even though you've
|
||||
explored a few pages of the site.</p>
|
||||
|
||||
<p>WebView has a method `canGoBack` which tells you if there is anything on the
|
||||
<p>WebView has a method <code>canGoBack</code> which tells you if there is anything on the
|
||||
page stack that can be popped. All you need to do is detect a back button press
|
||||
and determine if you should step back through the WebView's history or allow the platform
|
||||
to determine the correct behaviour. Inside your MainActivity class, add the
|
||||
|
|
@ -396,7 +394,7 @@ or compress).</p>
|
|||
<p>Generally it's good practice to keep your web files in a subdirectory, so create
|
||||
a www directory and put all your web content in it.</p>
|
||||
|
||||
<p><strong>Note:</strong>It's worth noting that absolute paths do not work in the WebView when
|
||||
<p><strong>Note:</strong> Absolute paths do not work in the WebView when
|
||||
referring to other files, such as CSS and JavaScript. So make sure you make all references
|
||||
relative, instead of absolute (for example, instead of "/pages/somelink.html", use
|
||||
"./pages/somelink.html").</p>
|
||||
|
|
@ -427,7 +425,7 @@ for non-local pages:</p>
|
|||
|
||||
<p>Now you are set to build a great WebView app!</p>
|
||||
|
||||
<p>For tips on getting the visuals just right, see <a href="pixelperfect.html">Pixel-Perfect UI in the WebView</a>.</p>
|
||||
<p>For tips on getting the visuals just right, see <a href="pixelperfect">Pixel-Perfect UI in the WebView</a>.</p>
|
||||
|
||||
<p>If you run into trouble, the Chrome DevTools are your friends. See <a href="/devtools/docs/remote-debugging">Remote Debugging on Android</a> to get started.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ JavaScript engine and support for modern web standards that were missing in
|
|||
the old WebView. It also shares the same rendering engine as Chrome for Android,
|
||||
so rendering should be much more consistent between the WebView and Chrome.</p>
|
||||
|
||||
<p>If you're a web developer looking to start developing a WebView-based Android application, see <a href="gettingstarted.html">Getting Started: WebView-based Applications for Web Developers</a>.</p>
|
||||
<p>If you're a web developer looking to start developing a WebView-based Android application, see <a href="gettingstarted">Getting Started: WebView-based Applications for Web Developers</a>.</p>
|
||||
|
||||
<p>For tips on scaling WebView content for mobile devices, see <a href="pixelperfect.html">Pixel-Perfect UI in the WebView</a>. </p>
|
||||
<p>For tips on scaling WebView content for mobile devices, see <a href="pixelperfect">Pixel-Perfect UI in the WebView</a>. </p>
|
||||
|
||||
<p>The new WebView also supports <a href="/devtools/docs/remote-debugging">remote debugging</a>
|
||||
using the Chrome DevTools.</p>
|
||||
|
|
@ -53,8 +53,7 @@ user-agent string. Don't rely on the specific Chrome version number,
|
|||
|
||||
<h3 id="how_do_i_set_the_user_agent_of_the_webview_">How do I set the user-agent of the WebView?</h3>
|
||||
|
||||
<p>You can set the user-agent by using the Java <a href="http://developer.android.com/reference/android/webkit/WebSettings.html#setUserAgentString(java.lang.String">setUserAgentString
|
||||
API</a>)
|
||||
<p>You can set the user-agent by using the Java <a href="http://developer.android.com/reference/android/webkit/WebSettings.html#setUserAgentString(java.lang.String)">setUserAgentString</a>
|
||||
method. This method only changes the user-agent string for requests sent by the WebView itself.</p>
|
||||
|
||||
<p>You can't set the user-agent string used for <code>XMLHttpRequest</code>s made from JavaScript. Those
|
||||
|
|
@ -102,7 +101,7 @@ information.</p>
|
|||
|
||||
<h3 id="how_do_i_enable_remote_debugging_">How do I enable remote debugging?</h3>
|
||||
|
||||
<p>See the <a href="https://developers.google.com/chrome-developer-tools/docs/remote-debugging">remote debugging guide</a>.</p>
|
||||
<p>See the <a href="/devtools/docs/remote-debugging">remote debugging guide</a>.</p>
|
||||
|
||||
<h3 id="does_the_webview_support_the_chrome_apps_apis_">Does the WebView support the Chrome Apps APIs?</h3>
|
||||
|
||||
|
|
|
|||
|
|
@ -44,16 +44,16 @@ devices – for example, if you’re displaying content you don’t
|
|||
case, you need to force the WebView to use a desktop-size viewport:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://developer.android.com/reference/android/webkit/WebSettings.html#setUseWideViewPort(boolean">setUseWideViewPort(true)</a>)</li>
|
||||
<li><a href="http://developer.android.com/reference/android/webkit/WebSettings.html#setLoadWithOverviewMode(boolean">setLoadWithOverviewMode(true)</a>)</li>
|
||||
<li><a href="http://developer.android.com/reference/android/webkit/WebSettings.html#setUseWideViewPort(boolean)">setUseWideViewPort(true)</a></li>
|
||||
<li><a href="http://developer.android.com/reference/android/webkit/WebSettings.html#setLoadWithOverviewMode(boolean)">setLoadWithOverviewMode(true)</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Without these methods being set and no viewport the WebView will try and set the
|
||||
<p>If these methods are not set <em>and</em> no viewport is specified, the WebView will try and set the
|
||||
viewport width based on the content size. </p>
|
||||
|
||||
<p>In addition to doing this, you may want to use the new layout algorithm <code>TEXT_AUTOSIZING</code>
|
||||
introduced in Android 4.4, which increases the font size to make it more readable on a mobile
|
||||
device. See <a href="http://developer.android.com/reference/android/webkit/WebSettings.html#setLayoutAlgorithm(android.webkit.WebSettings.LayoutAlgorithm">setLayoutAlgorithm</a>). </p>
|
||||
device. See <a href="http://developer.android.com/reference/android/webkit/WebSettings.html#setLayoutAlgorithm(android.webkit.WebSettings.LayoutAlgorithm)">setLayoutAlgorithm</a>. </p>
|
||||
|
||||
<figure>
|
||||
<img src="/multidevice/images/webview/text-autosize.jpg" width="658" alt=""/>
|
||||
|
|
@ -147,8 +147,8 @@ easy way to do this is play around with the size of a browser window. But rememb
|
|||
actual devices have different screen densities than your monitor, so always test on a
|
||||
range of devices.</aside>
|
||||
|
||||
<p>There will be best practices for organising CSS and designing for mobiles on
|
||||
<a href="http://www.html5rocks.com/en/">HTML5Rocks</a> soon.</p>
|
||||
<p>For more on designing for mobile devices, see
|
||||
<a href="http://www.html5rocks.com/en/mobile/">HTML5Rocks</a>.</p>
|
||||
|
||||
</div><div class="collapsible">
|
||||
<h2 id="images">Images</h2>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ page each time you change an HTML, CSS or JavaScript file.</p>
|
|||
|
||||
<p>Then create a new web app with Yeoman:</p>
|
||||
|
||||
<pre><b>yo webapp</b></pre>
|
||||
<pre><strong>yo webapp</strong></pre>
|
||||
|
||||
<p>Follow the on-screen prompts to select project options.</p>
|
||||
|
||||
|
|
@ -67,12 +67,12 @@ page each time you change an HTML, CSS or JavaScript file.</p>
|
|||
|
||||
<p>Before proceeding to the next step, test the app by running the following command:</p>
|
||||
|
||||
<pre><b>grunt server</b></pre>
|
||||
<pre><strong>grunt server</strong></pre>
|
||||
|
||||
<p>A new tab should open in your browser, connecting to a local server started by Grunt.
|
||||
If you change one of the HTML, CSS or JavaScript files in the project, the page automatically
|
||||
reloads and updates. If you run <code>grunt build</code> a new directory, <code>dist</code>, is created and your webapp
|
||||
is compressed, optimised and made into a production ready version inside this folder.</p>
|
||||
reloads and updates. If you run <code>grunt build</code> a new directory, <code>dist</code>, is created and your
|
||||
web app is compressed, optimised and made into a production ready version inside this folder.</p>
|
||||
|
||||
</div><div class="collapsible">
|
||||
<h2 id="step4">Step 4. Configure the Gradle build</h2>
|
||||
|
|
@ -114,7 +114,7 @@ Open <code>settings.gradle</code> in the root directory and add the following li
|
|||
</div><div class="collapsible">
|
||||
<h2 id="step5">Step 5. Build your WebApp when you build the android app</h2>
|
||||
|
||||
<p>The final step is to get the webapp to build and then copy the app into the
|
||||
<p>The final step is to get the web app to build and then copy the app into the
|
||||
<code>assets</code> directory of our Android app.</p>
|
||||
|
||||
<p>
|
||||
|
|
@ -150,8 +150,8 @@ Let’s examine each part of this.
|
|||
}</code></pre>
|
||||
|
||||
<p>
|
||||
This <code>Copy</code> task copies your application from the <code>webapp/dist</code> directory,
|
||||
we want to copy the files to <code>src/main/assets/www</code>. This task
|
||||
This <code>Copy</code> task copies your application from the <code>webapp/dist</code> directory.
|
||||
We want to copy the files to <code>src/main/assets/www</code>. This task
|
||||
also creates the necessary file structure if any of the required directories don't exist.
|
||||
</p>
|
||||
|
||||
|
|
@ -196,8 +196,8 @@ of your app. Here it sets a dependency on the <code>assemble</code> tasks to run
|
|||
</p>
|
||||
|
||||
<p>
|
||||
The <code>assemble</code> tasks "assemble the output(s) of the project", so before you do that,
|
||||
you need to copy your application over to the Android project.
|
||||
The <code>assemble</code> tasks assembles the output of the project, so the web app needs
|
||||
to be copied over to the Android project first.
|
||||
</p>
|
||||
|
||||
</div><div class="collapsible">
|
||||
|
|
@ -209,13 +209,15 @@ In Android Studio, you should have no <code>assets</code> directory in your Andr
|
|||
</p>
|
||||
|
||||
<p>
|
||||
Don’t forget you’ll need to set the WebView to use the <code>index.html</code> page and enable
|
||||
JavaScript if you want to use it. For details, see
|
||||
the <a href="gettingstarted.html">Getting Started Guide</a>.
|
||||
Don’t forget you’ll need to set the WebView to use the <code>index.html</code> page:
|
||||
</p>
|
||||
|
||||
<code>mWebView.loadUrl("file:///android_asset/www/index.html");</code>
|
||||
|
||||
<p><strong>Note:</strong> If your page uses JavaScript, you need to enable it explicitly.
|
||||
For details, see the <a href="gettingstarted#enable_javascript">Getting Started Guide</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Now press <b>Run</b> and let your application build. You should see an <code>assets</code> directory with your web application in the
|
||||
<code>www</code> subdirectory.
|
||||
|
|
@ -243,7 +245,7 @@ In your Android app's <code>build.gradle</code> add the following lines in bold
|
|||
defaultConfig {
|
||||
...
|
||||
}
|
||||
<b>productFlavors {
|
||||
<strong>productFlavors {
|
||||
staticbuild {
|
||||
packageName "com.google.chrome.myapplication"
|
||||
}
|
||||
|
|
@ -251,7 +253,7 @@ In your Android app's <code>build.gradle</code> add the following lines in bold
|
|||
liveserver {
|
||||
packageName "com.google.chrome.myapplication.liveserver"
|
||||
}
|
||||
}</b>
|
||||
}</strong>
|
||||
|
||||
}</code></pre>
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче