使用 javascript 为移动设备调整大小和调整的指南答案

【问题标题】：Guidelines for resizing and adjusting for mobile devices using javascript使用 javascript 为移动设备调整大小和调整的指南
【发布时间】：2015-01-15 19:15:37
【问题描述】：

我在使用 JavaScript 调整网页大小以适应移动设备时遇到了问题。大多数程序员用来开始更改移动设备的调整大小是否有一定的宽度？任何人都可以推荐我在使用移动设备时应该或需要遵循的任何准则吗？我现在被指示确保所有网页都“适合移动设备”。

function adjustStyle() {
        var width = 0;
        // get the width.. more cross-browser issues
        if (window.innerHeight) {
            width = window.innerWidth;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            width = document.documentElement.clientWidth;
        } else if (document.body) {
            width = document.body.clientWidth;
        }
        // now we should have it
        if (width < 650) {
            document.getElementById("myCSS").setAttribute("href", "css/narrow.css");
        } else {
            document.getElementById("myCSS").setAttribute("href", "css/main.css");
        }
    }

    // now call it when the window is resized.
    window.onresize = function () {
        adjustStyle();
    };

【问题讨论】：

标签： javascript android jquery-mobile

【解决方案1】：

对于初学者，您不应该依赖 Javascript 来使您的页面响应不同的分辨率或屏幕尺寸，CSS 可以使用 media-queries 为您处理。

只有在以下情况下才应在响应式设计中使用 JavaScript：

你有一个极端的设计特性，在 CSS 中是不可能正确实现的
您希望通过添加一些交互、动画或自定义行为来增强您的网页。
您有一个实验性网站，用户在其中期待一些与众不同的东西
如果需要 javascript 来正确显示/运行您的页面，您愿意警告您的用户。

在您用 CSS 编写响应式布局之后，最好只使用 javascript 来增强您的页面，这样，如果在浏览器中关闭 javascript，您的网站仍然可以运行。

"Progressive enhancement" 是 Web 开发人员的一种流行技术，他们希望在关闭 Javascript 的情况下使页面看起来很好，这样没有 javascript 的用户仍然可以获得良好的体验，那么，javascript 中的渐进增强意味着如果用户打开了 javascript，可以确保他们获得更好的体验，因为他们可能会看到一些漂亮的动画，以及很酷的视差滚动等。

话虽如此，您的问题是直接询问有关使用 javascript 进行响应式设计的问题，所以从那里开始，建议很简单：

使用 jQuery 的 bind() 或 resize()函数来监听浏览器调整大小事件：

$(window).resize(function() {
    // handle layout here
    // change widths, heights, positions, etc
});

$(window).bind("resize", function(){ 
    // handle layout here 
    // change widths, heights, positions, etc
});

然后，您可以根据您的设计影响元素的宽度和高度和位置，或为它们分配 CSS 属性。

关于良好的“断点”（在响应式布局中需要注意的屏幕尺寸），您可以参考本指南：Media Queries for Common Device Breakpoints。

我倾向于从这里的某个地方开始，然后在进行时进行调整：

手机： 宽度：320px - 750px
平板电脑： 宽度：> 750px - 1024px
笔记本电脑/台式机： 宽度: > 1024像素

然后我在多个设备上进行测试，并进行相应的更改，您的最终设计将决定您选择作为断点的最终数字。

希望这会有所帮助。

【讨论】：

【解决方案2】：

我通常使用 600 的宽度来针对移动设备进行调整。

确保在<head> 标记内添加此元标记：

<meta name="viewport" content="width=device-width">

这应该使页面以合理的大小呈现。

在<head> 标签内添加这个<style> 标签：

<style>
img {
    max-width: 100%;
}
</style>

我认为这将确保所有图像的渲染范围不会超过应用的 webview 视口。

（如果这不起作用，请尝试 width: 100%；而不是。这肯定会使所有图像都与视口一样宽，因此不会更宽。）

你也可以在你的css中尝试@media标签，它们允许你根据分辨率完全重新编程：

    @media screen and (max-width: 600px) {
  .button {
    width:300px;
  }
   }

那么对于移动设备以上的不同分辨率

@media screen (min-width: 600px) and (max-width: 1200px) {
  .button {
    width:500px;
  }
}

但是你总是可以使用jquery的

$(window).resize(...)绑定resize事件的回调或者触发这个事件。

如果用户调整浏览器窗口大小，则绑定一个回调函数：

$(window).resize(function() {
    alert('resize handler called');
});

如果你想手动调用所有的监听器（不带任何参数）：

$(window).resize();

【讨论】：