调整你的站点到不同的窗口大小

分享于 

4分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

Modern IE 10 支持宽和高的浏览器,支持W3C工作草案 CSS设备适配插件的宽度和高度。 这为网络开发人员提供了一个简单的工具来控制跨不同窗口尺寸的自动内容缩放。 特别是,它使站点能够轻松地适应 Windows 8浏览触摸启用的平板电脑设备和 portrait 方向。

自动缩放及其使用时

大多数网站针对 1024像素宽窗口进行了优先级优化。 这样可以在浏览器最大化时为各种显示提供良好的用户体验。 然而,如果网站没有针对其他窗口尺寸( 如 ) 进行优化,就无法在平板电脑和人像屏幕方向上很好地工作,。 特别是,页面在狭窄的宽度下经常剪裁或者扭曲布局。

TechCrunch和维基百科在非常窄的Windows 中显示

这个窄布局在 Windows 8中特别重要,它的中浏览器的折叠视图处于这种精确状态。 这种情况也发生在 portrait 设备上的模式,因为它的外形。

默认情况下,捕捉视图和 portrait 模式自动缩放,以确保至少 1024像素的布局宽度。 移动设备采用了类似的方法:在窄的形状上显示non-mobile-optimized站点时。 由于大多数网站以 1024像素的形式工作,这确保它们的布局很好,不要默认地剪辑内容。

TechCrunch和维基百科在 Windows 8地铁风格浏览器中显示

尽管这种方法确保了一个良好的默认体验,但是用户需要放大查看并与站点交互。

在狭窄的窗口中工作

最好的窄布局是那些由Web开发者定制的。 除了将网站插入 narrower 区域,还需要更改图像大小。内容重新排序。站点导航和它的他基本更改。

如果你的网站已经对窄 Windows 进行了修改,那么可以使用设备适配器来覆盖默认的比例。

有关自适应布局的一些很好的示例,请参阅查询。 在市场上,金属 Toad 媒体也有一篇关于布局宽度支持的文章,它基于流行的设备和屏幕尺寸。

使用 @-ms-viewport

为捕捉视图提供简单的支持。 如果站点已经有 320像素宽度布局,你可以轻松选择在snapped视图中显示该版本。 结合设备适应和CSS媒体查询可以有选择地覆盖自动缩放功能。 这个CSS覆盖默认的自动缩放,并为所有 Windows 320像素宽或者 narrower 强制一个一致的320像素布局宽度:





@media screen and (max-width: 320px) {


 @-ms-viewport { width: 320px; }


}



当窗口 LESS 大于 320像素时,内容将被缩小以适应。 例如 300像素宽窗口将显示 93.75 % 比例的内容。 对于较大的宽度,ie10缩放的法线应用( 例如当地铁样式浏览器处于 portrait 模式时)。

设备适应在那些还不支持它的浏览器中优雅地退化。 这些浏览器仍然可以从狭小的布局支持中受益,它们不会自动缩放以适应窗口的内容。

如果站点支持 768像素宽布局,则可以使用第二个viewport规则轻松添加纵向模式支持。





@media screen and (max-width: 320px) {


 @-ms-viewport { width: 320px; }


}



@media screen and (min-width: 768px) and (max-width: 959px) {


 @-ms-viewport { width: 768px; }


}



我建议测试你的网站在布局宽度 768像素( 大多数石板上的肖像) 和 320像素( snapped地铁风格浏览器) 除了 1024像素和更宽的( 横向)。 你可以在中的操作中看到viewport规则的一个例子 ! 关于 IE 测试驱动站点的演示。


Window  ADA  尺寸  
相关文章