Question

我尝试过很多不同的东西，比如：
元标记：<meta name="viewport" content="width=device-width, initial-scale=1"> 和@-ms-viewport以及使我的网站在ipad mini和iphone上正确缩放的所有内容

出于某种原因，我可以获得尺度为0.65的元标记视口来处理迷你版，但在iPhone上却非常大。

希望有人可以帮助我完成这项工作！

Here is the site

Answer 1

首先看起来你错误输入了你的DOCTYPE声明，你已经把：

<DOCKTYPE html>

应该是：

<!DOCTYPE html>

除此之外，如果您希望根据屏幕尺寸更改初始比例，您可以执行以下操作：

var screenWidth  = screen.width;
var screenHeight = screen.height;
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.00');

// ipad/ipad mini/tablet screen sizing
if(screenWidth < 1024) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.65');
}
// iphone/smartphone sizing
if(screenWidth < 600) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5');
}

这将在ipad大小的设备上将初始比例设置为0.65，在iphone大小的设备上设置为0.5。

我建议您查看responsive design以使该网站更适用于平板电脑/智能手机（听起来您现在只是想缩小桌面网站，这在以下方面并不是一个很好的解决方案我的意见）

上述代码也仅在初始页面加载时运行，如果您想在浏览器调整大小时运行此代码，您可以使用JavaScript中的resize事件，例如

window.addEventListener('resize', function(event){
  // do stuff here
});

您可以创建一个包含我的示例代码的函数，然后在页面加载和页面调整大小上运行它。

屏幕尺寸优化不适用于ipad mini iphone

1 个答案: