如何允许缩放平板电脑，但不允许移动答案

【问题标题】：How to allowing scaling for tablet, but not mobile如何允许缩放平板电脑，但不允许移动
【发布时间】：2012-05-22 12:07:16
【问题描述】：

我想在平板电脑纵向和横向模式下查看时缩放我的网站的桌面版本，但我不想在移动设备上缩放它，因为我有一个针对移动设备的优化版网站。目前我有下面的元标记：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

只有在移动设备上查看网站时才应用此功能的最佳方式是什么？

感谢您的帮助。

【问题讨论】：

标签： javascript css responsive-design

【解决方案1】：

创建您的视口并使用 css 媒体查询来定位。

    @media only screen and (max-device-width: 480px) {
    div#wrapper {
        width: 400px;
    }

    div#header {
        background-image: url(media-queries-phone.jpg);
        height: 93px;
        position: relative;
    }

    div#header h1 {
        font-size: 140%;
    }

    #content {
        float: none;
        width: 100%;
    }

    #navigation {
        float:none;
        width: auto;
    }
}

查看http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

【讨论】：

嗨，我已经有了针对不同设备的媒体查询。问题是如何将初始比例设置为 1，仅适用于移动设备而不适用于平板电脑。我刚刚解决了这个问题，只有在屏幕尺寸小于 768px 宽时才使用 javascript 写出元视口标签。这似乎可以解决问题
为了记录，我真的很讨厌做这种“针对移动设备优化”的事情并禁止在移动设备上缩放的网站。如果我正在 iPhone 上查看网页，我应该能够放大并更好地查看图像或其他内容......
我同意。此外，横幅广告。 CBS 最近的移动网站很糟糕：{

【解决方案2】：

考虑使用 WURFL 进行设备检测。借助 WURFL 的存储库，您可以为特定设备加载各种库、css 等。

WURFL 对平板电脑有特定的 API 调用

if ( is_tablet == 'true' ) {
 //do this or load your scaling
 echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
}else{
 echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">';
}

WURFL API

【讨论】：

不过，请注意 WURFL 许可证。