javascript - 如何让使用 JavaScript 制作的应用程序为其他 Apple 设备自动调整大小？

Question

我已经使用 Javascript/CSS 和 HTML 创建了一个应用程序，只是一个简单的游戏，没什么特别的..但是，当我在 xcode(iphone5 模拟器)中运行游戏时，它运行良好，没有问题，并且在实际的 iPhone5 设备上通过我的 Apple Dev 帐户使用临时方法，但是当我在 iPad mini 和 iPad 3 上尝试时，游戏只显示在左上角，在一个只能被描述为 iphone5 大小的屏幕内。问题是，我如何使用 JS、CSS 或 HTML 告诉应用程序(在 xcode6 中)调整大小以适应比 iphone5 更大的设备。基本上我如何告诉应用程序根据设备调整大小，我想启动游戏(希望!)当然适用于 iphone5、6 和所有 iPad。

我正在使用 xcode6 和 iOS8

非常感谢您提供的任何帮助。

如果通过 Skype 共享屏幕更容易，会很高兴吗？ (让我知道)

Answer 1

问题是 iPhone 的宽度比 iPad 小。你已经为 iPhone 开发了一个应用程序，所以当你在 iPad 上模拟它时，我只需要宽度高达 586px 或 320px 而不是所有 iPad 宽度。可以使用媒体查询调整此宽度。

在您的样式表中添加以下媒体查询。

如下使用CSS媒体查询

html
{
//default styles as you have used(for iPhone 5 as you said)
}
body
{
//default styles as you have used
}
.contianer(wrapper)
{
//default styles as you have used
}

//media queries for iPad 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  
{ 
/* STYLES GO HERE */
//use width upto 768px
}

//media queries for iPad mini

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{ 
/* STYLES GO HERE */
}

使用适当的宽度，最多 1024 像素到 768 像素，因为它可以与 iPad 匹配，并且您可以让您的应用在 iPad 上可见。

转到此 Link适用于 iphone 和 ipad 样式。