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

Posted 2023-03-12

【中文标题】如何让使用 JavaScript 制作的应用程序自动调整其他 Apple 设备的大小？

【英文标题】：How to get an App made using JavaScript to autoresize for other Apple Devices?

【发布时间】：2014-10-18 12:49:52

【问题描述】：

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

我正在使用 xcode6 和 ios8

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

如果这样做更容易，是否愿意通过 Skype 进行屏幕共享？ （让我知道）

【参考方案1】：

问题是 iPhone 的宽度比 iPad 小。你已经为 iPhone 开发了一个应用程序，所以当你在 iPad 上模拟它时，我只需要 586 像素或 320 像素的宽度，而不是所有的 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 样式。

【讨论】：

嗨，你能举一个上面代码的例子来显示 iphone 6 和 ipad mini 吗？非常感谢..

浏览答案中提供的链接。