Question

我正在寻找一种技术，只有当前设备（我的网络应用运行的地方）有一个“小”屏幕 - 小于5英寸时才能应用某个CSS。

让我的问题更清晰的一些注意事项：

它不应该基于屏幕分辨率或密度，因为有些平板电脑的分辨率很低，而某些智能手机的分辨率很高。
它也不应该依赖于当前浏览器的窗口大小。如果它是桌面，则即使窗口变小，也不应该应用CSS。
我的网络应用有两种布局。一个是默认设置，针对台式机和平板电脑进行了优化。另一种布局针对智能手机进行了优化，只能在智能手机上打开。
在我的情况下，在服务器端无法做任何事情。每种变体的不同域都不是一种选择。

提前谢谢！

更新

以下是我最佳尝试的测试页：http://jsbin.com/uXULOpe/2/

对于三星Galaxy Nexus i9250（4,5“sreen），它启用了错误的风格（”。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>

Answer 1

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

   //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 */ }

});

但是你需要在头脑中包含jQuery脚本。它是一个很大的框架。

如何仅在屏幕尺寸小于5英寸的设备上应用CSS？

1 个答案: