让网页更适配移动设备

来看一下手机淘宝的效果。打开 chrome ， 输入 https://m.taobao.com ，等待页面加载完毕点击 chrome 菜单中的添加到主屏幕，看到可以在桌面生成一个快捷图标，点击图标进入，可以看到直接变成一个全屏的单独页面，给用户体的验更好。查看页面源码，发现需要添加以下代码去适配。

淘宝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  .....
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <link rel="dns‐prefetch" href="https://image.uc.cn">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
  <link href="" rel="apple-touch-icon-precomposed">
  <link href="https://ww1.sinaimg.cn/large/8c9b876fjw1f7zaijlukpj2040040t8m.jpg" rel="Shortcut Icon" type="image/x-icon">
</head>

<body>
   .....
</body>
</html>

这里是我给自己的网页适配后的效果。更多配置可以转到Install to Homescreen

joke

参考链接

文章来自： https://hanks.pub