-1

最近我为当地的一所音乐学校创建了一个网站。一次很好的经历告诉我，我必须在每件事上有所改进并进行大量练习。
这是链接

起初我想让它响应，但我很快意识到我没有足够的时间和知识。无论如何，我第一次使用 Html 5 和相关措施：桌面导航似乎还可以。

如果我进行 iPad 和移动测试，出现问题：页面右侧的空白区域；页眉、内容和页脚不适合整个空间，尽管我已经为它们设置了宽度：100%。Kindle Fire 和 Opera Mobile 的横向测试中也出现了同样的情况。

我怎么能解决这个问题？我不想让它完全响应，只是为了让容器适合所有设备布局。

4

1 回答 1

0

要在 ipad 和移动设备上实现 100%，您需要做两件事： • 使用 META 激活视口（我认为仅 100% 并不是必需的，但请尝试）例如：

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

• 当你有100% 的显示问题后，你就满足了。例如，您的内容具有 100% 的宽度，可以，但您的导航、滑块和旁边是 XXEM 的宽度。

要在 ipad/mobile 等设备上显示 100% 宽度，您需要为此添加新的 CSS。例子 ：

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
nav[role="navigation"] {width: 100%;}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
nav[role="navigation"] {width: 100%;}
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
nav[role="navigation"] {width: 100%;}
}
于 2013-04-12T09:59:56.403 回答