Javascript 网页上的iPad定位问题

我为个人电脑开发了一个网页，我希望它也能与iPad兼容。不过，我并没有在我的页面上添加与iPad兼容的特定内容。我只添加了meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />

当我在iPad横向模式下查看网站时，在页面加载时，它看起来不错。但当我切换到纵向模式时，页面看起来被切断了。当我再次切换到横向模式时，页面看起来被进一步切断

---

要使我的页面与iPad兼容，我还应该遵循哪些其他实践。我正在寻找使用%宽度之类的建议/最佳实践。我的元素目前最大为954px。我是否必须使用%宽度来实现iPad兼容性？还有其他有用的提示吗？

初始比例=1.0意味着您的页面将加载“全尺寸”，这在横向模式下太宽了。如果您使用该元标记，通常会将其与调整页面宽度以适应屏幕的精确尺寸结合使用。既然你不是，我就不会使用meta标签，让iPad的浏览器正常加载页面（浏览器会帮你将页面安装到屏幕上）