- Progressive Web Apps with React
- Scott Domes
- 330字
- 2021-07-08 09:36:14
Meta tags and favicons
Our application will be mobile-first, as we have already discussed. To ensure that our HTML is fully optimized, let's add a bit more markup.
First, let's add a DOCTYPE declaration to the top of index.html. This tells the browser what kind of document to expect. In HTML 5 (the newest version of HTML), it always looks like this:
<!DOCTYPE html>
Next, we need to add a meta tag for viewport width. It looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
What does this do? Essentially, it tells the browser to display the web page at the same width as its screen. So, if the web page seems to be 960px and our device is 320px wide, rather than zooming out and showing the whole page, it'll instead squish all the content down until it's 320px.
As you might expect, this is only a good idea if your website is responsive and able to adapt to a smaller size. However, since responsiveness is one of our main goals, let's do this from the start. Add this tag within the <head> of our document.
A couple more tags to go! The character set we use on our web page can be encoded in a couple of different ways: Unicode and ISO-8859-1. You can look up these encodings for more information, but long story short, we're using Unicode. Let's add it like so, right below the previous <meta> tag:
<meta charset="utf-8">
While we're at it, let's add the language the HTML is in. On our existing <html> tag, add lang="en":
<html lang="en">
Okay, that about does it for HTML housekeeping. The last thing we need is a favicon, the little icon displayed next to the title in the browser tab. This is included in our assets bundle, so all we have to do is link it up (right underneath our <meta> tags):
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
Your browser tab should now look like this:
With that, we're done!
Next, we'll look at how we will include React in our project, and all the other dependencies we will need.
- Node.js+Webpack開發實戰
- Python機器學習：數據分析與評分卡建模（微課版）
- Android Jetpack開發：原理解析與應用實戰
- Mastering JavaScript Object-Oriented Programming
- Python數據分析入門與實戰
- Mastering Ember.js
- Spring Boot企業級項目開發實戰
- MATLAB for Machine Learning
- Mastering Unity 2D Game Development（Second Edition）
- 從零開始學Linux編程
- Mastering Xamarin.Forms（Second Edition）
- Web性能實戰
- Java EE企業級應用開發教程（Spring+Spring MVC+MyBatis）
- HTML5+CSS3+jQuery Mobile APP與移動網站設計從入門到精通
- Serverless Web Applications with React and Firebase