All geek questions in one place

Using Viewport to create a mobile version

I am working on a website, but I also want to have a mobile version. I am new to this.

Someone suggested I use the following code, for which I cannot find many related questions 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 I can’t just convert the whole page.

What I'm asking for is a few pointers on how I can achieve my goal.

+6
source share
3 answers

http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ gives you an introduction to various aspects of the viewport meta tag. To optimize for a range of screen sizes, you probably want to use <meta name="viewport" content="width=device-width"> in combination with multimedia queries (also described in the article above).

Note that the Element Fusion tutorial to which you are attached uses comma delimiters between view view values ​​instead of commas — this is not true. Be sure to use commas, as in your first example :-)

+8
source

The viewport has a lot of messages. you just put this between your headers. http://www.quirksmode.org/mobile/viewports2.html may give you a better idea. Remember to use the mobile doctype along with the viewport.

for instance

  <?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>
+4
source

Im uses iWeb 2011 with all its legacy configurations and, of course, with a relative width of 700 pixels.

Ive found that 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 rotation with the resizer app. Or download the resizer app to view the Googles widget. (free) to show your visual compatibility with all devices.

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

Also check out my Element Source sites.

Visit: Apple Support Community "View iView Configuration" https://discussions.apple.com/message/29393840?ac_cid=op123456#29393840

+1
source

Source: https://habr.com/ru/post/890143/

More articles:


All Articles