I'm working on a site, but I want a mobile friendly version aswell. I'm a newbie to this.
Someone suggested I should use the following code, to which I can't find many relating question on here:
<meta name="viewport" content="width=320, initial-scale=1">
The problem is that I have no idea how to implement it, and I know that cannot simply convert the whole page.
What I am requesting is some pointers on how I can reach my goal.
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ gives you an introduction to the various aspects of the viewport meta tag. For optimizations across a range of screen sizes, you probably want to use <meta name="viewport" content="width=device-width">
in combination with media queries (also covered in the article above).
Note that the Element Fusion tutorial you linked to uses semicolon delimiters between viewport values instead of commas - this is not correct. Be sure to use commas, like in your initial example :-)
There are quite few posts about viewport. you simply put it between your head tags. http://www.quirksmode.org/mobile/viewports2.html might give you better idea. Don't forget to use mobile doctype together with viewport.
For example
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=2.0, width=device-width" />
</head>
<body>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With