- 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.
- 玩轉Scratch少兒趣味編程
- 機器學習系統：設計和實現
- Maven Build Customization
- 自己動手實現Lua：虛擬機、編譯器和標準庫
- INSTANT CakePHP Starter
- 網絡爬蟲原理與實踐：基于C#語言
- Python數據可視化之Matplotlib與Pyecharts實戰
- Java應用開發技術實例教程
- Learning Python by Building Games
- 青少年學Python（第1冊）
- Raspberry Pi Robotic Projects（Third Edition）
- Java并發編程之美
- 動手打造深度學習框架
- SQL Server 入門很輕松（微課超值版）
- PyQt編程快速上手