0

我正在寻找一种技术，仅当当前设备（我的 web 应用程序运行的地方）具有“小”屏幕时才允许我应用特定的 CSS——例如小于 5 英寸。

一些注释使我的问题更清楚：

  • 它不应该基于屏幕分辨率或密度，因为有些平板电脑的分辨率很小，有些智能手机的分辨率很高。

  • 它也不应该取决于当前浏览器的窗口大小。如果它是桌面，那么即使窗口很小，也不应该应用 CSS。

  • 我的网络应用程序有两种布局。一种是默认设置，针对台式机和平板电脑进行了优化。另一种布局针对智能手机进行了优化，只能在智能手机上打开。

  • 就我而言，在服务器端什么都做不了。每个变体的不同域不是一种选择。

先感谢您！

更新

这是我最好的尝试的测试页面：http: //jsbin.com/uXULOpe/2/

对于三星 Galaxy Nexus i9250（4,5" 屏幕），它启用了错误的样式（".pad"）...对于 iPad 和 WindowsPhone，它似乎正在工作。Android 似乎认为它的宽度至少为 8 英寸。

资源：

<!DOCTYPE html>
<html>
<head>
    <title>M-Q test</title>

    <style>
        .always,
        .desktop,
        .pad,
        .smart{
            display: none;
        }

        .always{
            display: inline-block;
        }

        @media  only screen and (min-device-width : 10in) {

            .desktop{
                display: inline-block;
            }
        }

        @media  only screen and (min-device-width : 5in) and (max-device-width : 10in) {

            .pad{
                display: inline-block;
            }
        }

        @media  only screen and (max-device-width : 5in) {

            .smart{
                display: inline-block;
            }
        }
    </style>

    <meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, maximum-scale=1.0; user-scalable=0;"/>

    <meta name="HandheldFriendly" content="true" />

</head>
<body>

    <ul>
        <li>Always: <span class="always">x</span></li>
        <li>Desktop: <span class="desktop">x</span></li>
        <li>Pad: <span class="pad">x</span></li>
        <li>Smartphone: <span class="smart">x</span></li>
    </ul>

</body>
</html>
4

1 回答 1

-2

要使用两个模板/模型/属性：

   //controll the browser size and set Propertys
    if( body.offsetWidth < 400 ){ /* Small Sized Propertys */ }
    if( body.offsetWidth >= 400 ){ /* Big Sized Propertys */ }

要动态设置大小，请使用 jQuery：

//this starts on every browser resize interaction
$( window ).resize(function() { 

if( body.offsetWidth < 400 ){ /* Small Sized Propertys */ }
if( body.offsetWidth >= 400 ){ /* Big Sized Propertys */ }

});

但是您需要在 Head 中包含 jQuery 脚本。它是一个大框架。

于 2014-05-09T12:10:29.883 回答