Question

我有HTML5动画内容，我想在iPad和Android平板电脑的浏览器中查看。

我已经为iPad（Safari）做了一个版本很好的版本。

我最好设计几种不同的网站布局和屏幕尺寸（视口愚蠢），还是可以设计一个网站，使内容适应不同的浏览器，屏幕＆amp;视口大小？

是否有在线教程＆amp;资源呢？

由于

Answer 1

最佳做法是

检查浏览器功能，而不是（品牌）嗅探用户代理字符串。
设计最多可以作为＆＃34;一个网站，将内容调整到不同的浏览器，屏幕＆amp;视口大小＆＃34;就像你说的那样。说起来容易做起来难，但前进的方向......
通过应用对目标受众有意义的修补程序来管理您无法通过这种方式执行的操作。（比如IE条件评论，可能不适用于iOS或Android，但为什么要停在那里：）

可以找到许多资源。搜索以下关键字。＆＃34; CSS媒体查询＆＃34;，＆＃34;流体布局＆＃34;，＆＃34;响应式设计＆＃34;，...

Answer 2

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 media queries tutorial

Answer 3

您应该始终尝试制作流体/液体网站布局（基于屏幕宽度/高度的百分比），根据屏幕尺寸改变尺寸。

如果此“动画内容”具有固定大小的元素，您可能会在侧面添加一些黑条以在Android平板电脑上进行补偿。

某些前端框架（如Bootstrap）可以为您处理所有流动性。

建立仅在iPad和Android平板电脑上运行的网站？

3 个答案: