跨平台html5应用程序，单独设计？
我现在想制作一个基本上可以在所有支持 html5 的设备上运行的应用程序。最后三个让我感到困惑，因为关于这些设备的应用程序的信息很少。
它们都有不同的屏幕分辨率，是否都需要单独设计？
iPhone 3Gs/ iPhone 4
Motorola Droid
iPod Touch
iPad 2
Samsung Tab 7”
Motorola Xoom
Sony Tablet S
I would now like to make an app that works on basically all html5 enabled devices. The last three have me stumped, as there is little info out there on apps for these devices.
They all have different screen resolutions, do they all need separate designs?
iPhone 3Gs/ iPhone 4
Motorola Droid
iPod Touch
iPad 2
Samsung Tab 7”
Motorola Xoom
Sony Tablet S
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您希望它们适合所有设计，您可以使用百分比作为宽度并将所有内容弯曲到屏幕上。首先设计所有内容以适应最小的屏幕分辨率，并在此基础上进行扩展。我的意思是，由于 iPhone 的分辨率较小，所以首先要让所有必要的内容适合 iPhone。然后，如果您想向 ipad 用户或具有更大分辨率的用户显示其他内容，您可以使用 css 或编程语言来显示右侧内容面板或任何您需要的内容来适应额外的空间。
这是没有必要的，因为如果你的左栏是 40%，右栏是 60%，它在 ipad 上会填充相同的内容，但根据你的内容，你可能不需要这么多空间，所以你可以只用其他信息填充该空间较大的设备。
您可以使用 JQuery 获取屏幕宽度并为每种类型和布局显示不同的 css 文件。
祝你好运
If you want them to fit all designs you can use percentages as widths and flex everything to the screen. Start by designing everything to fit your smallest screen resolution and expand based on that. By that I mean since the iphone is smaller resolution get all of the necssary content to fit on the iphone first. Then if you have other stuff you would like to show to ipad users or users with larger resolution you can uses css or your programming language to show a right side content panel or what ever you need to fit the extra space.
This is not necessary since if your left column is 40% and right column is 60% it will fill the same on an ipad but depending on your content you many not need this much space so you can fill up the space with other information only on the larger devices.
You can use JQuery to get the screen width and display different css files for each type and layout.
Good luck
您应该考虑跨所有设备和外形尺寸进行单一体验对用户的影响。
手机的空间非常紧张，因此它们通常都会进行范式练习。获取列表、选择、在堆栈上弹出视图、弹出回列表等...这是由房地产决定的导航重流。
平板电脑有更大的空间可供使用，因此您应该利用弹出视图、多个分割窗格等来利用它。
事实上，它是 HTML5 而不是 UIKit 是无关紧要的。客户希望获得良好的体验，并期望在不同的外形尺寸上获得不同的体验。
我建议即使在 HTML5 应用程序中也遵循模型视图控制器。将尽可能多的逻辑放入 JavaScript 代码的通用模型集中，并且仅在视图上有所不同。与您在 UIKit 中所做的相同...
如果您根据实际空间大小创建一个通用模型和不同视图，那么至少您只构建了 2 个（平板电脑与手机）而不是 2 * 数量的平台。
You should consider the user impact of doing a single experience across all devices and form factors.
Phones are very tight on real estate so they generally have a drill in paradigm. Get a list, select, pop a view on the stack, pop-out back to the list etc... It's a navigation heavy flow dictated by the real estate.
Tablets have much larger real estate to work with so you should take advantage of that with pop-over views, multiple split panes etc...
The fact that it's HTML5 and not UIKit is irrelevant. Customers want a good experience and expect different experiences on the different form factors.
What I would recommend is to follow a model view controller even in the HTML5 app. Push as much logic as you can down into a common model set of javascript code and differ by the views only. Same as you would do in UIKit ...
If you create a common model and different views based on real estate size, at least you're only building 2 (tablet vs. phone) and not 2 * number of platforms.