根据视口大小更改HTML元素的宽度

我一直致力于使Web应用程序更适合移动设备。我通过PhoneGap运行应用程序来获取移动版本，但是事先使用Ripple Emulator测试它的外观。根据视口大小更改HTML元素的宽度

PhoneGap在应用程序上运行得很好，但是有一种“控制面板”的宽度不会改变，并且它使得该控制面板占用了移动视图的大部分宽度，这是不好。

所以基本上，我需要编辑当前JavaScript文件，以便它检测查看器是否是移动设备，并相应地调整此控制面板元素的宽度。不幸的是，我基本上都是全新的网页开发..

所以作为一个普遍的问题，我会怎么做呢？我认为我需要在页面实际加载之前进行这些调整，但我不确定这会发生在JS文件的哪个位置。客户端正在使用JQuery Mobile和其他一些库。最初的开发者已经在使用

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

标签，但对这个控制面板部分没有任何影响，并且在控制面板的元素的宽度是被硬编码。

这是一个相当模糊的问题，但我会很感激任何提示或指导。

来源

2013-07-29 derekahc

它不会有你需要的款式内容是移动友好的任何影响，你有没有尝试重置用于移动网站的CSS样式，使用100％而不是固定的宽度，或者甚至移动用户重定向到一个移动版本的网站（如果你重定向请注意，你需要在两个站点上查找规范标签和替代标签，以避免页面排名丢失并通知搜索引擎蜘蛛！ –

使用定位特定的CSS，如：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

将视口设置为设备最大宽度和使用CSS照顾内容的实际宽度：

<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />

来源

2013-07-29 21:45:28 eclipsis

您可能希望检查“响应”设计。具体来说，我非常喜欢Bootstrap的实现。它全部由CSS控制，并基于视口像素宽度。

您可以创建使用以下“@media” CSS代码响应CSS：

@media (max-width: 240px) { 
    /* really tiny screens */ 
} 
@media (min-width: 241px) and (max-width: 319px) { 
    /* a little bit bigger screens */ 
} 
@media (min-width: 320px) and (max-width: 767px) { 
    /* Basically up to, but not including an iPad */ 
} 
@media (min-width: 768px) { 
    /* iPad and bigger */ 
}

每个@media标签内，您可以将您的自定义CSS每个大小，所以在240像素，你可能有一个字体大小为16px的标题类：

@media (max-width: 240px) { 
    /* really tiny screens */ 
    .title { 
    font-size: 16px; 
    } 
}

然后冲洗并重复更改每个后续视口大小的字体大小。

来源

2013-07-29 21:46:25 Robbie

这看起来像是一个很好的方法，@ Robbie。但是，这是一个非常大的css文件（他们决定把所有css内容放在一个文件中，实际上命名为all.css ...），那么我需要在每个宽度“tier”中复制所有不同的css组件？例如，假设这个控制面板有一个“联系人”选项卡和一个“收藏夹”选项卡，我是否必须为每个宽度层中的联系人和收藏夹放置特定元素宽度？ – derekahc

在这种情况下，我建议使用Media Queries。

@media (min-width: X) and (max-width: Y) { 
    /* CSS rules for screens of width between X and Y. */ 
}

来源

2013-07-29 21:52:19 federicot

根据视口大小更改HTML元素的宽度

回答

相关问题