- 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.
- Dependency Injection in .NET Core 2.0
- 編寫高質量代碼：改善Python程序的91個建議
- Python王者歸來
- 微信公眾平臺開發：從零基礎到ThinkPHP5高性能框架實踐
- INSTANT Django 1.5 Application Development Starter
- C++新經典
- HTML5從入門到精通 （第2版）
- ArcGIS for Desktop Cookbook
- Odoo 10 Implementation Cookbook
- 多媒體技術及應用
- Hacking Android
- OpenCV 3.0 Computer Vision with Java
- Instant GLEW
- Yii2 By Example
- Raspberry Pi Blueprints