Question

因此，有一个应用程序链接到两个不同的网页。第一个是由我制作的，它具有响应性，所以当它装在手机上时，一切都很合适。

另一个是我工作的公司制作的，没有回应。

现在我应该在两个页面的顶部添加一个栏，当它们在应用程序中加载时，栏需要具有相同的大小。我无法在非响应页面上进行任何更改，只能在顶部的栏中进行更改。

让我们以900px和360px为例，一页缩小以适应iPhone的360px，另一页则保持900px的宽度，因此它可以缩小以适应手机的移动屏幕。

http://imgur.com/6tV1IDT

我需要为宽度为900px的条形图制作一个条形图，即使它被不同的手机按比例缩小，也会与360px宽度页面上的宽度相同。（缩小到不同的宽度/高度）

有没有办法设置要通过手机缩放忽略的元素高度，即使页面的其余部分已缩放？

Answer 1

我认为如果您只为该条定义width: 100%;它应该可以使用，也可以在非响应页面上。

Answer 2

尝试将此添加到文档<meta name="viewport" content="width=device-width, initial-scale=1">的头部。由于您的问题写得非常糟糕，因此很难理解您想要或想要解决的问题。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The rest of the head below... -->
</head>

Answer 3

我知道这不是措辞所以它很容易理解，但也许有人会搜索类似的东西并最终在这里结束，所以这就是我解决它的方式。

//get the width of the browser without the scaling 
//if the window is smaller than 260 my paged stopped scaling and started to use a horizontal scrollbar instead
//the minimum depends on your webpage I think. (Change the 260 to the minimum width of your page.
currentWidth = screen.width > 260 ? screen.width : 260;

//get the relative size depending on the size of the non-scaling webpage.
//The page I worked with had a width of 1050.
//If the browser is wider than the page set the size to 1.
relativeSize = screen.width < 1050 ? (1050/currentWidth) : 1;

获得该值后，您可以使用relativeSize *（未缩放时的大小），即使页面大小缩小，也会达到相同的大小。

我将其设置为onLoad和onResize事件，并在页面大小更改时调整我的标题大小。即当有人翻过手机时你可能想再次调整大小。

编辑：screen.width而不是window.outerWidth让它在iphone上运行。

通过电话缩放页面时，标题不会改变大小

3 个答案: