CODEWITHSUNDEEP
htmlmobilemeta-tags
JaPerk14
JaPerk14

Reputation: 1664

html meta tags for mobile devices

I have a block of html code, which is mainly meta tags. I'm trying to re-design my layout for mobile devices, so I want to know if the meta tags that I'm using are necessary for a mobile layout. The block of code is provided below:

<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">

Upvotes: 15

Views: 50031

Answers (3)

ooXei1sh
ooXei1sh

Reputation: 3559

whether or not they are necessary depends on what "mobile" device you are trying to target.

I've used as little as:

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

and achieved decent results across a number of mobile devices using just Respond.js and @media queries.

may be helpful:

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

Upvotes: 21

Sanxofon
Sanxofon

Reputation: 981

I like to include design meta-tags also. Not mentioned in previous responses. They allow full screen display and change the color of the browser bar. Nice!

<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">

Upvotes: 0

will.fiset
will.fiset

Reputation: 1572

What you have is already pretty good, but do not forget to add <!DOCTYPE html> at the top of your html file. I found that there have been cases where this has significantly effected the look on a mobile device.

Upvotes: 3

Related Questions