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

Question

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

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();
    };

Answer 1

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

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

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

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

在 <head> 标签内添加此 <style> 标签：

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

我认为这将确保所有图像的渲染宽度不会超过应用的网络视图的视口。

（如果这不起作用，请尝试 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(...) 为调整大小事件绑定回调或触发此事件。

绑定回调函数，如果用户调整浏览器大小window:

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

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

$(window).resize();

Answer 2

对于初学者，您不应该依赖 Javascript 让您的页面响应不同的分辨率或屏幕尺寸，CSS 可以使用 [=13] 为您处理=].

Javascript 应仅在以下情况下用于响应式设计：

你有一个极端的设计特点，在 CSS
您想通过添加一些交互、动画或自定义行为来增强您的网页。
您有一个实验性网站，用户期待一些与众不同的东西
如果需要 javascript 才能正常 display/run 您的页面，您愿意警告您的用户。

最佳做法是在 CSS 中编写响应式布局后仅使用 javascript 来增强您的页面，这样，如果 javascript 是在浏览器中关闭。

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

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

使用jQuery的bind() or 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 属性。

至于好的 "breakpoints"（响应式布局中需要注意的屏幕尺寸），您可以参考本指南：Media Queries for Common Device Breakpoints。

我倾向于从这里的某个地方开始，然后边走边调整：

手机： 宽度：320px - 750px
平板电脑： 宽度：> 750px - 1024px
Laptops/Desktops: 宽度: > 1024px

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

希望这对您有所帮助。

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

Guidelines for resizing and adjusting for mobile devices using javascript

javascript

android

jquery-mobile