- 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.
- Rust實戰
- 大學計算機基礎實驗教程
- Web交互界面設計與制作（微課版）
- C/C++常用算法手冊（第3版）
- Lua程序設計（第4版）
- Mastering RStudio：Develop，Communicate，and Collaborate with R
- Android Wear Projects
- Solr Cookbook（Third Edition）
- Drupal 8 Development Cookbook（Second Edition）
- Using Yocto Project with BeagleBone Black
- Offer來了：Java面試核心知識點精講（框架篇）
- Java語言程序設計實用教程（第2版）
- Scratch編程從入門到精通
- Mastering Python
- Web前端開發精品課：HTML5 Canvas開發詳解