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

我拥有HTML5动画内容，我想在iPad和Android平板电脑的浏览器中查看。建立仅在iPad和Android平板电脑上运行的网站？

我已经为iPads（Safari）做了一个版本，它已经很棒了。

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

有没有在线教程&这个资源？

感谢

来源

2013-03-09 Donelson

最好的做法是

检查通过用户代理字符串嗅探浏览器的能力，而不是（品牌）。
就像您所说的那样，您可以设计最多的“一个网站，使内容适应不同的浏览器，屏幕&”。说起来容易做起来难，但是前进的道路......
通过应用对目标受众有意义的修复来管理你不能这样做的方式。（如IE条件注释，这可能不适用于iOS或Android，但为什么停在那里:)

有很多资源可以找到。搜索以下关键字。 “CSS Media Queries”，“Fluid layout”，“Responsive Design”，...

来源

2013-03-09 16:36:54 raybiss

非常感谢。 – Donelson 2013-03-09 20:49:58

您应该总是尝试制作流体/液体网站布局（基于屏幕宽度/高度的百分比）屏幕尺寸。

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

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

来源

2013-03-09 16:38:11

Bootstrap看起来很有趣;不知道现在是否超出了我的知识/技能水平。我会联系他们获取更多信息，谢谢。 – Donelson 2013-03-09 20:15:50

是的，有固定大小的动画帧...（源大小2000 x 600现在）但是*哪些*大小选择这些帧取决于我。显然，为不同屏幕选择最佳尺寸会很好，只要我知道如何挑选这些尺寸！ – Donelson 2013-03-09 20:29:54

你可以使用jQuery/Javascript来捕获浏览器的宽度/高度。我不知道你对这些事情有多少经验。 http://api.jquery.com/height/ – 2013-03-09 20:37:12

HTML5媒体查询将允许您隐藏和显示不同视口等内容，因此保持相同的HTML源代码，但通过链接各种CSS样式表来调整其视觉上的adderance。我倾向于使用：

<!-- 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

来源

2013-03-09 16:49:43

对不起，但“CSS/basic.css”等是哪里？谢谢你的帮助！ – Donelson 2013-03-09 20:27:26

这些文件将是您为每个设备类型单独开发的特定css文件，如果你走了那条路线。可以将此技术想象为“具有设备相关CSS的条件解析的单个Web布局”。在您的模板中使用媒体查询可以帮助您为较小的设备选择适当的图形图像/脚本/字体。 Tim Kadlec撰写的关于这些技术的优秀资源是实现响应式网页设计。 – 2013-03-09 21:18:28

这取决于您可以在那里编辑位置，例如href =“CSS/basic.css”这仅仅意味着你有一个名为CSS的文件夹，并且在该文件夹中有一个名为basic.css的文件，这样做的好处在于，对于所有窗口大小，网页将显示相同台式电脑，并且在您调整浏览器大小时不会更改，只需更改设备即可在平板电脑或手机等浏览网站 – 2013-03-09 21:23:16

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

回答

相关问题