移动端的头部标签和 meta

最新推荐文章于 2022-08-17 22:41:25 发布
最新推荐文章于 2022-08-17 22:41:25 发布
阅读量7k 收藏 7
点赞数
文章标签： html5 meta

使用 HTML5 doctype，不区分大小写

<!DOCTYPE html>

更加标准的 lang 属性写法

<html lang="zh-cmn-Hans">

meta

声明文档使用的字符编码

<meta charset='utf-8'>

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

页面描述

<meta name="description" content="不超过150个字符"/>

页面关键词

<meta name="keywords" content=""/>

网页作者

<meta name="author" content="name, email@gmail.com"/>

搜索引擎抓取

<meta name="robots" content="index,follow"/>

为移动设备添加 viewport

<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

iOS 设备

添加到主屏后的标题（iOS 6 新增）

<meta name="apple-mobile-web-app-title" content="标题">

是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏

<meta name="apple-mobile-web-app-capable" content="yes"/>

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

设置苹果工具栏颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

忽略页面中的数字识别为电话，忽略email识别

<meta name="format-detection" content="telphone=no, email=no"/>

启用360浏览器的极速模式(webkit)

<meta name="renderer" content="webkit">

避免IE使用兼容模式

<meta http-equiv="X-UA-Compatible" content="IE=edge">

针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓

<meta name="HandheldFriendly" content="true">

微软的老式浏览器

<meta name="MobileOptimized" content="320">

uc强制竖屏

<meta name="screen-orientation" content="portrait">

QQ强制竖屏

<meta name="x5-orientation" content="portrait">

UC强制全屏

<meta name="full-screen" content="yes">

QQ强制全屏

<meta name="x5-fullscreen" content="true">

UC应用模式

<meta name="browsermode" content="application">

QQ应用模式

windows phone 点击无高光

<meta name="msapplication-tap-highlight" content="no">

iOS 图标

iPhone 和 iTouch，默认 57x57 像素，必须有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>

Retina iPad，144x144 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>

iOS 启动画面

iPad 竖屏 768 x 1004（标准分辨率）

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>

iPad 竖屏 1536x2008（Retina）

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>

iPad 横屏 1024x748（标准分辨率）

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>

iPad 横屏 2048x1496（Retina）

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>

iPhone/iPod Touch 竖屏 640x960 (Retina)

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>

iOS 设备 end

Windows 8 磁贴颜色

 <meta name="msapplication-TileColor" content="#000"/>

Windows 8 磁贴图标

<meta name="msapplication-TileImage" content="icon.png"/>

添加 RSS 订阅

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

添加 favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>

标题

<title>标题</title>


源引：http://segmentfault.com/a/1190000002532413

alex8046
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端专用的meta标签设置大全
01-21
之前学习前端中，对meta标签的了解仅仅只是这一句。 <meta charset=UTF-8> 但是打开任意的网站，其head标签内都有一列的meta标签。比如我们软件开发网网站，但是自己却很不熟悉，于是把meta标签加入了学习...
web---HTML基础知识
Allure泽宇的博客
06-11 5342
HTML基础知识内容总结
【学习笔记】HTML5 示例
码海畅游记录
07-18 2449
示例1 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet
移动游览器私有Meta属性
linghunyoushou的博客
08-08 332
Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。我搜集了一些资料整理了一些在移动端的mate私有属性，用以补充HTML meta标签总结,HTML5 head meta属性整理这篇文章，分享给大家。 一、Safari浏览器私有 Meta 属性 <!-- 强制显示方式 --> <meta name="viewport" content="width=devi...
完美解决 ios10 及以上 Safari 无法禁止缩放的问题
weixin_30929011的博客
04-10 493
在 iOS 10之前，iOS 和 Android 都可以通过一行 meta 标签来禁止页面缩放：<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />但 iOS 10开始，meta 设置在 Safari 内无效了。 所...
移动端web头标签
02-04 364
&lt;!DOCTYPE html&gt;&lt;!-- 使用 HTML5 doctype，不区分大小写 --&gt; &lt;htmllang="zh-cmn-Hans"&gt;&lt;!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --&gt; &lt;head&gt; &lt;!-- 声明文档使用的字符编码 --&gt; &lt;
移动端html5 meta标签的神奇功效
12-14
制作手机版网站的时候，除了页面简洁、操作方便等访问者可以看到的地方以外，就是 Meta 标签的设置，合理设置 Meta 标签 对手机版网站的搜索引擎优化，手机浏览器的渲染展示都有非常大的帮助。对于桌面平台web布局中...
H5 头部标签和meta
08-14
NULL 博文链接：https://onestopweb.iteye.com/blog/2322468
移动端头部
weixin_30715523的博客
07-23 121
<div class="header" :class="{'ios': isIOS, 'iphonex': isIphonex}"> <div class="content"> <div class="back"></div> <div class="title">办理赔&...
css 移动端实现头部 底部固定 中间内容滚动
包子脸爱学习的博客
06-21 3027
自己平常编码最常用到的三种方法： 方法一：flex布局 <style> *{ margin: 0; padding: 0; } .container{ display: flex; height: 100vh; flex-direction: column; } .head,.footer { height: 40px; wi
网页制作 移动端专用的meta标签设置大全
01-22 1522
网页制作 移动端专用的meta标签设置大全 前言 之前学习前端中，对meta标签的了解仅仅只是这一句。 但是打开任意的网站，其head标签内都有一列的meta标签。比如我们脚本之家网站，但是自己却很不熟悉，于是把meta标签加入了学习计划的最前方。 这个用的最多，width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字，要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使
CSS - 移动端布局（一）关键的前置知识
伏城之外的博客
08-17 1365
物理像素、物理分辨率、CSS像素、逻辑分辨率、设备像素比DPR、屏幕尺寸、像素密度PPI、DPI、视网膜显示屏、二倍图、三倍图、视口、布局视口、视觉视口、移动浏览器的布局视口、980、移动浏览器对PC网页的缩放、meta viewport、initial-scale、width、理想视口、device-width...........................
移动前端不得不了解的html5 head 头标签
01-07 336
本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签。 移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta标签显得非常重要。   DOCTYPE DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使
移动端html头部设置
hugejihu9的专栏
10-19 2028
文章来自：源码在线https://www.shengli.me/css/82.html   代码：  
移动端html头部meta标签的含义
weixin_30788731的博客
12-10 99
<!-- 页面将以原始大小显示，不允许缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> width - viewport的宽度 height - viewport的高度 ...
移动端html 头部header代码示范
热门推荐
武当山道士的博客
07-22 1万+
"> //清缓存 //电话号码不显示为拨号连接； // 网站开启对web app的支持 //顶部状态条的样式 default 白色 black 黑色 black-translucent:半透明（若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px））
基于bootstrap模板-现代浏览器博物馆网页源代码
m0_37109682的博客
07-06 3401
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
移动端 a标签下载 跳出页面
最新发布
09-01
移动端的a标签下载跳出页面可以通过设置meta元标签中的download属性来实现。download属性是HTML5中的一个属性，它可以指定一个链接下载时的文件名。当用户点击这个链接时，会直接下载文件，而不是在当前页面中打开。这样就可以实现跳出页面下载文件的效果。 另外，如果你想在移动端的页面中实现滚动容器的效果，可以使用CSS的overflow-y属性来控制元素的垂直滚动。将overflow-y属性设置为auto，可以在元素内容溢出时添加滚动条。这样用户就可以通过滚动来查看元素的内容。 此外，在移动端中，有些浏览器会自动调整页面字体大小，这可能会影响到页面的布局和显示效果。如果你想禁止微信浏览器调整页面字体大小，可以通过在meta元标签中添加viewport元标签，并设置其属性为"user-scalable=no"来实现。这样可以禁止用户缩放页面，从而避免字体大小的自动调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [移动端 移动自适应 移动端meta元标签](https://blog.csdn.net/weixin_44482244/article/details/101012980)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [移动端实现返回之前浏览过页面 滚动条还在上次浏览的位置](https://blog.csdn.net/m0_61135864/article/details/121676783)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值