移动端viewport_使您的网站移动和iPhone友好

移动端

If you're when at your blog logs that more and more are your site from a , you want to be .

如果您在查看博客流量日志时发现有越来越多的人正在通过移动设备访问您的网站，那么您可能会愿意接受。

I have that like the , iPod Touch and (well, that's just one guy) have been up my list of +OSs that visit this blog.

我最近注意到，诸如，iPod Touch和 (可能只是一个人)之类的移动设备一直在我访问此博客的浏览器+操作系统列表中不断攀升。

How can I make their suck less? Just the has and can most full-size doesn't mean I go with the HTML. There's a few that can be done to make the more .

我该如何减少他们的经历？ 仅仅因为具有并可以处理大多数标准尺寸，并不意味着我应该更喜欢HTML。 有一些简单的事情可以做，以使体验更加无缝。

为您的网站添加主屏幕图标 (Add Home Icons for your )

If you visit a on an and hit the plus and click Add to Home ...

如果您在上访问网站，然后单击加号按钮，然后单击“添加到主屏幕...”。

NOTE: Hold down HOME and the LOCK to take .

注意：按住HOME和LOCK按钮以拍摄屏幕快照。

You'll get this with a icon of the 's . In this case, it's way too tiny and doesn't well my site. It's not an icon that I'd want on an 's Home .

您将获得一个带有当前浏览器屏幕生成的缩略图图标的屏幕。 在这种情况下，它的方式过于微小的，并没有真正很好地代表我的网站。 当然，这不是我想要在主屏幕上显示的图标。

, if you make a 60x60 PNG image file and name it "apple-touch-icon.png" and put it in the root of your , you'll get over that icon.

但是，如果您制作了一个60x60的PNG图片文件并将其命名为“ apple-touch-icon.png ”并将其放置在网站的根目录中，则可以控制该图标。

If you don't have over the root of your you can add a to your pages and point it to PNG you like you like:

如果您无法控制域的根目录，则可以在页面上添加并将其指向任何您喜欢的PNG：

Now, if you hit Add to Home , you'll get a nice image with and a shiny bevel (the phone does that), your icon like this, will show up like this:

现在，如果您点击添加到主屏幕，您将获得一个带有自动圆角和闪亮斜角的漂亮图像(手机会这样做)，这样的图标将显示如下：

Very for a of .

花费很少的精力进行大量的抛光。

调整以获得“预缩放”的体验 ( the for a "Pre-" )

Next, if you visit a web page with and you tap to the and zoom to the width of it, why not just set that as an ? Just add a tag like this:

接下来，如果您使用 访问网页，并且总是双击以选择内容并放大其宽度，为什么不将其设置为初始默认值呢？ 只需添加一个标签，如下所示：

That will set the width of the "" - the part of the page that is in the -in view - as well as the the zoom scale and scale. This makes for a pre- and that doesn't the way the page is laid out.

这将设置“视口”的宽度(在放大视图中可见的页面部分)以及初始缩放比例和最小比例。 这带来了预缩放和轻松滚动的体验，而不会改变页面的布局方式。

It's still the full , just pre- for the .

它仍然是全部内容，只是针对进行了预缩放。

启用所有移动设备 ( All )

Next, to the users who are not using an , about two years ago I added to for a Theme that would and users to more . In the web. there is a huge at the end that was from this on . It uses the older ASP.NET 1.1 style of .

接下来，大约两年前，对于不使用的移动用户，我为添加了对自定义移动主题的支持，该主题将使 和 用户可以更舒适地浏览 。 在 web.中，末尾有很大一部分是从这段关于的文章中填充的。 它使用较旧的ASP.NET 1.1样式的浏览器检测。

For , if I to serve a Theme to users that visit my blog, I could add these lines to the areas for and OS's:

例如，如果我想为访问我的博客的用户提供移动主题，则可以将这些行添加到平台和操作系统的过滤器区域：

  platform="iPhone"

...snip...

  os="iPhone"

...snip...

  isMobileDevice="true"

then just like this and does the right thing. uses its own , but you can use this kind of and "" your site for any you like.

然后，就这样检查并做正确的事情。 使用其自己的主题引擎，但是您可以使用这种检测并针对您喜欢的任何设备“降级”网站。

//Are we on a Mobile Device? See if we have a mobile theme and use it instead.
System.Web.Mobile.MobileCapabilities mobile = (System.Web.Mobile.MobileCapabilities)Request.Browser;
if(mobile.IsMobileDevice == true)
{
    theme = themes["mobile"];
    if(theme == null)
    {
        loggingService.AddEvent(new EventDataItem(EventCodes.Error,
            String.Format("If you have a theme called 'mobile' in your themes folder, 
                readers who visit your site via a Mobile Device will automatically 
                get that theme. User-Agent: {0}",Request.UserAgent),
            String.Empty));
    }
    else
    {
        return theme;
    }
}

way, if you to setup a theme for a , or you just add a few bits of "" like icons and some , it's to at least be of who is your site in which and feel to make good for them.

无论哪种方式，如果您选择为访问者设置自定义的移动主题，或者只是添加一些“ ”(例如友好的图标)和一些特定于浏览器的元数据，那么至少要意识到谁正在访问您的网站，这一点很重要。哪些设备和功能可以为他们带来良好的体验。

翻译自:

移动端