移动设备的 html 元标记

问题描述 投票:0回答:4

我有一段html代码,主要是元标签。 我正在尝试为移动设备重新设计布局,因此我想知道我正在使用的元标记对于移动布局是否是必需的。 代码块如下:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<title>ConquestRealms - Home</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="cleartype" content="on">
html mobile meta-tags
4个回答
20
投票

它们是否有必要取决于您尝试定位的“移动”设备。

我只用过:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

并且仅使用 Respond.js 和 @media 查询就在许多移动设备上取得了不错的结果。

可能有帮助:

http://www.alistapart.com/articles/responsive-web-design

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

http://css-tricks.com/snippets/css/media-queries-for-standard-devices

https://github.com/scottjehl/Respond


3
投票

你所拥有的已经相当不错了,但不要忘记在 html 文件的顶部添加

<!DOCTYPE html>
。我发现在某些情况下这会严重影响移动设备上的外观。


0
投票

我也喜欢包含设计元标签。之前的回复中没有提到。它们允许全屏显示并更改浏览器栏的颜色。不错!

<meta name="theme-color" content="#ff0000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My Web App">
<meta name="apple-mobile-web-app-title" content="Mobile rules">
<meta name="apple-mobile-web-app-status-bar-style" content="red">

-2
投票

https://www.onlinegenericmedicine.com/

如何检查移动优先索引的元数据。

© www.soinside.com 2019 - 2024. All rights reserved.