0

我刚刚从原生 iOS 开发人员转移到跨平台。我正在使用 phonegap，我想根据设备屏幕尺寸和方向创建不同的布局。我想做的是类似于此代码

if(orientation == LANDSCAPE)
{
    if(screen.width < 320)
    {
        //use css #1
    }
    else
    {
        //use css #2
    }
}
else //orientation is PORTRAIT
{
    if(screen.width < 320)
    {
        //use css #3
    }
    else
    {
        //use css #4
    }
}

或者，如果这不是进行设计的适当方式，那我该怎么做？

4

3 回答 3

1

这很大程度上取决于你想做什么。如果您打算根据设备的分辨率或屏幕方向更改逻辑或从 DOM 中添加/删除元素，请使用 JS 方式。如果您使用的是 jQuery，那么它很简单，如下所示：

var deviceWidth = $(window).width();
var deviceHeight = $(window).height();

然而，CSS 本身提供了根据屏幕大小设置条件样式的方法。这些被称为media-queries（http://www.w3.org/TR/css3-mediaqueries/），您可以按如下方式使用它们：

@media only screen and (max-device-width: 480px) {
    body {
        font-size: 2em;
        /* etc. these styles will be applied only when device's screen is smaller than 480px */
    }
}

您可以使用更多属性。max-device-width只是和例子。此外，如果设备的大小不合适，您可以完全阻止浏览器加载样式文件：

<link rel="stylesheet" media="only screen and (max-width-device: 480px)" href="480-device.css" />

查看 w3c 文档或仅搜索media-queries. 它们现在几乎与所有浏览器兼容：http: //caniuse.com/#feat=css-mediaqueries

于 2012-09-24T07:35:06.000 回答
0

鉴于 PhoneGap 将 Web 应用程序包装到本机外壳中，此时您实际上是在进行 Web 开发。您需要查看媒体查询。对于您发布的代码，适当的媒体查询类似于以下内容：

/* Landscape */
@media screen and (orientation: landscape) {
    /* Landscape styles */
}

/* Portrait */
@media screen and (orientation: portrait) {
    /* Portrait styles */
}

/* Portrait and screen width < 320 */
@media screen 
and (orientation: portrait)
and (max-width: 320px) {
    /* Portrait styles for screen smaller than 320 pixels */
}

媒体查询规范说您应该能够嵌套媒体查询，这将更紧密地匹配您的控制语句的结构，但不幸的是大多数现代浏览器还不支持这一点。

于 2012-09-24T07:39:11.660 回答
0

我想你可以试试下面的 JS 代码：

function _orientationHandler() {
    if(event.orientation){
        if(event.orientation == 'portrait'){
            if(screen.width < 320)
            {
                //use css #1
            }
            else
            {
                //use css #2
            }
    }
    else if(event.orientation == 'landscape') {
        if(screen.width < 320)
        {
            //use css #1
        }
        else
        {
            //use css #2
        }
    }
}

$(window).bind('orientationchange', _orientationHandler);
于 2012-09-24T07:44:43.967 回答