我有 HTML5 动画内容，希望在 iPad 和 Android 平板电脑上的浏览器中查看。
我已经为 iPad (Safari) 做了一个版本，效果很好。
我最好设计几个不同的网站布局和屏幕尺寸（视口愚蠢），还是可以设计一个使内容适应不同浏览器、屏幕和视口尺寸的网站？
有这方面的在线教程和资源吗？
谢谢
问问题
242 次
3 回答
1
最佳做法是
- 检查浏览器功能而不是（品牌）通过用户代理字符串嗅探。
- 就像你说的那样，尽可能地将内容设计为“使内容适应不同浏览器、屏幕和视口大小的单一网站”。说起来容易做起来难，但这是前进的方向......
- 通过应用对目标受众有意义的修复来管理您无法以这种方式做的事情。（就像 IE 条件注释，它可能不适用于 iOS 或 Android，但为什么要停在那里 :)
有很多资源可以找到。搜索以下关键字。“CSS 媒体查询”、“流畅布局”、“响应式设计”、...
于 2013-03-09T16:36:54.627 回答
1
HTML5 媒体查询将允许您在不同的视口等上隐藏和显示内容，从而保持相同的 HTML 源代码，但通过链接各种 CSS 样式表来调整其视觉附加性。我倾向于使用：
<!-- MOBILE DEVICES -->
<link href="CSS/basic.css" rel="stylesheet" media="screen and (max-device-width: 767px)" />
<!--ANDROID MOBILE FIX-->
<link href="CSS/basic.css" rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" />
<!-- TABLET DEVICES -->
<link href="CSS/tablet.css" rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" />
<!--DESKTOP DEVICES -->
<link href="CSS/desktop.css" rel="stylesheet" media="screen and (min-device-width: 1025px)" />
这是一个CSS3 媒体查询教程
于 2013-03-09T16:49:43.277 回答
0
您应该始终尝试制作根据屏幕尺寸改变尺寸的流体/液体网站布局（基于屏幕宽度/高度的百分比）。
如果此“动画内容”具有固定大小的元素，您可能会在侧面添加一些黑条以在 Android 平板电脑上弥补这一点。
一些像Bootstrap这样的前端框架可以为你处理所有的流动性。
于 2013-03-09T16:38:11.720 回答