Question

我有一个网络应用程序，其中响应式布局不是移动设备的选项，所以我尝试使用视口缩放，但没有成功。

页面大小为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

我不确定你想要实现的目标，但是使用以下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 2

对我来说，我创建了一个css-layout文件链接到我的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 3

设计响应式网站的方法有很多种。

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 4

而不是$(window).width()，请尝试window.outerWidth。另外，请使用首选的宽度（以像素为单位）而不是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 5

当我使用Chrome的devTools尝试此操作时，scale变量似乎是正确数量的两倍。除以2为我解决了问题：

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

Answer 6

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

Answer 7

应用bootstrap。

尝试将col-xs（col-xs-4到col-xs-12）用于所有div类，并使用css媒体查询为元素提供固定的宽度/高度。

Answer 8

哇！这些答案确实很复杂。我只是新手，但我想我找到了一个简单的解决方法。这可能会花费一些时间（如果您几乎完成了网站的准备工作，可能会花费太长时间，因此您应该按照其他解决方案进行操作），但是它可以正常工作。 注意：该解决方案虽然很简单，但是（显然）需要对创建网站，JavaScript，HTML和CSS的所有三种主要语言有基本的了解，因为在此解决方案中使用了这三种语言。首先，将其键入HTML的head标签。

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

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

console.log(window.innerWidth)

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

1vw = 1% of the width of the viewport

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

x*(100vw/device width in pixels)

使用计算器进行计算。将所有单位放入vw后，浏览器将相对于视口放置所有元素，并且网站外观几乎不会改变。希望这会有所帮助！

将网站扩展到移动设备

8 个答案:

CSS媒体查询。

查看端口。