将网站扩展到移动设备

Question

我有一个 Web 应用程序，其中响应式布局不适用于移动设备，因此我尝试稍微调整视口缩放比例但没有成功。

页面大小为 1280x720，因此在小屏幕上应该缩小，在大屏幕上放大：

var scale = $(window).width() / 1280;

$('head').append('<meta name="viewport" content="width=device-width, height=device-height, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0">');

我只试过这个宽度，但结果不是我想要的，我做错了吗？

Answer 1

对我来说，我创建了一个 css-layout 文件 link 它到我的 html 文件并查询每个宽度或者您可以学习 bootstrap 并且您的网站将可以移动，而无需执行我所做的（bootstrap 对我来说编辑 js 很痛苦）至于查询这是我写出来的方式

在你的 html

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

然后在你的 css

@media only screen and (device-width: 1280px),
only screen and (max-width:1280px) {
.css-element {
yourcsscode:;
}
   }

我会把它写出来，但是你想要你的网页 css 然后像上面显示的那样构建尺寸还可以说你想要一个菜单栏出现你可以创建一个 css 对于主导航，然后使用 @media 然后更改该导航的 css 以显示菜单栏。

还有

.css-element{
display:block;
}

和

.css-element{
display:none;
}

查询时很有帮助

Answer 2

我不确定你到底想达到什么目的，但有以下 html

<meta name="viewport" content="width=1280, initial-scale=1">

及以下JS

var siteWidth = 1280;
var scale = screen.width /siteWidth;

document.querySelector('meta[name="viewport"]').setAttribute('content', 'width='+siteWidth+', initial-scale='+scale+'');

您应该能够在移动设备上显示初始放大或缩小的页面。您必须检查设备是否为纵向。对于横向，您需要使用 screen.height 而不是 screen.width

Answer 3

尝试 window.outerWidth，而不是 $(window).width()。此外，使用您喜欢的像素宽度而不是 device-width。所以代码变成：

var scale = window.outerWidth / 1280;

$('head').append('<meta name="viewport" content="width=1280, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0">');

它适用于 Chrome、Opera 和 Firefox 的移动版本。让我知道它是如何为你工作的。

Answer 4

设计响应式网站有不同的方法。

CSS 媒体查询。

          /* For mobile phones: */
          [class*="col-"] {
        width: 100%;
           }
          @media only screen and (min-width: 600px) {
         /* For tablets: */
       .col-m-1 {width: 8.33%;}
       .col-m-2 {width: 16.66%;}
       .col-m-3 {width: 25%;}
       .col-m-4 {width: 33.33%;}
       .col-m-5 {width: 41.66%;}
       .col-m-6 {width: 50%;}
       .col-m-7 {width: 58.33%;}
      .col-m-8 {width: 66.66%;}
      .col-m-9 {width: 75%;}
      .col-m-10 {width: 83.33%;}
      .col-m-11 {width: 91.66%;}
      .col-m-12 {width: 100%;}
         }
        @media only screen and (min-width: 768px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
         }

查看端口。

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 5

使用 window.innerWidth & window.outerWidth 属性动态计算宽度。

Answer 6

正在申请 bootstrap.

尝试对所有 div 类使用 col-xs（col-xs-4 至 col-xs-12），并为您的元素提供固定的 width/height 使用 css 媒体查询。

Answer 7

哇！这些答案真的很复杂。我只是个新手，但我想我找到了一个简单的解决方法。这可能需要一段时间（如果您的网站快要完成了，这可能会花费太长时间，您应该遵循其他解决方案），但它确实有效。 注意：此解决方案虽然简单，但（显然）需要对创建网站的所有 3 种主要语言有基本的了解，JavaScript、HTML 和 CSS，因为此解决方案中使用了所有 3 个。首先在 HTML.

的 head 标签中输入

<meta name=“viewport” content=“width=device-width, initial-scale=1.0“>

这基本上告诉浏览器确保视口（网站的可见区域）的宽度等于正在使用的设备本身的宽度。它还告诉浏览器在打开网站时进行 100% 缩放，用 initial-scale=1.0 表示。下一部分在 JavaScript 中。您需要找到视口的宽度。您可以使用的一种方法是

console.log(window.innerWidth)

基本上，这个 returns 视口的宽度以像素为单位进入 console，可以使用 Ctrl + Shift + I > “Console” 访问最后，是漫长而艰难的部分。这是在 CSS 中完成的。您必须转换网站上的所有单位。您可能使用的大多数单位都是 px 或像素。像素宽度因设备而异，因此，例如，位于网站完整右边缘的图片可能会显示在计算机中，但可能不会显示在 phone 或平板电脑上，因为 px 从左边开始可能会超过它的像素数量，如果这有意义的话。无论如何，您可以将 px 转换为 vw。 vw 单位，而 px 是固定单位，是相对单位。它是相对于视口的宽度。

1vw = 1% of the width of the viewport

因此，所有设备的宽度都是 100vw，即使它们都具有不同的像素宽度。因此，利用这些知识，您可以使用以下等式将 x 像素转换为该单位。

x*(100vw/device width in pixels)

用计算器算一下。一旦您的所有单位都在 vw 中，您的浏览器将相对于视口定位您的所有元素，并且您网站的外观几乎不会改变。希望这对您有所帮助！

将网站扩展到移动设备

Scale website to mobile devices

html

scale

zooming

meta-tags

CSS 媒体查询。

查看端口。