Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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">
like image 650
JaPerk14 Avatar asked Dec 14 '12 02:12

JaPerk14


2 Answers

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

like image 56
ooXei1sh Avatar answered Oct 15 '22 20:10

ooXei1sh


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.

like image 28
will.fiset Avatar answered Oct 15 '22 20:10

will.fiset