6

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.

Jack Tyler
  • 117
  • 1
  • 2
  • 5

3 Answers3

8

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 :-)

andreasbovens
  • 1,447
  • 12
  • 11
4

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>
nLL
  • 5,662
  • 11
  • 52
  • 87
  • Thanks for the help, I found a good tutorial here which helped. http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices Should have deleted my question! – Jack Tyler Jun 10 '11 at 08:54
  • 1
    There is no good reason to use a mobile doctype together with viewport. You should be good with just using – andreasbovens Jun 12 '11 at 23:48
  • How did you come up with that @andreasbovens? mobile doctype is recommended doctype for mobile web sites. is fine if you design for mobile safari though – nLL Jun 17 '11 at 08:17
  • 2
    It's not a W3C standard, you're needlessly limiting the amount of HTML you can use, and you have to serve it as application/vnd.wap.xhtml+xml which triggers draconian error handling in case the XML is not well-formed. Hence, does the job perfectly and works across mobile browsers (Opera, Safari, Firefox, Android, etc.) – andreasbovens Jul 05 '11 at 22:24
1

I’m using iWeb 2011 with all its outdated configurations and of course with a relative width of 700px.

I’ve found this works with all devices without changing anything:

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

This is my website:

http://theevolutionofreason.com/The_Evolution_Of_Reason.html

Take it for a spin with a resizer app. Or download Google’s viewport resizer app. (free), to show its visual compatibility with all devices

https://chrome.google.com/webstore/detail/viewport-resizer/kapnjjcfcncngkadhpmijlkblpibdcgm

Also, check out my website’s “Element Source”.

Visit:Apple Support Communities Discussion "iWeb viewport configuration" https://discussions.apple.com/message/29393840?ac_cid=op123456#29393840

pedro santos
  • 11
  • 2