Question

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

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

仅在移动设备上查看网站时适用的最佳方式是什么？

感谢任何帮助。

Answer 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/

Answer 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

如何允许平板电脑扩展，但不允许移动

2 个答案: