blocks|key|4464920|text|您的视口标签错误，应为<meta+name="viewport"+content="width=device-width,+initial-scale=1.0,+user-scalable=no">|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4464921|但也许<meta+name="viewport"+content="user-scalable=no"+/>会起作用。|4464922|entityMap^0|B|2G|0|3|1F|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

Your viewport tag is wrong, should be <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;</code>

But maybe <code>&lt;meta name="viewport" content="user-scalable=no" /&gt;</code> will work.

blocks|key|4465127|text|视口：<meta+name="viewport"+content="width=device-width,+initial-scale=1">。这将使浏览器以其自身屏幕的宽度呈现页面的宽度。本文提供了有关视口元标记的更多信息：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4465128|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag^0|3|1W|35|1Y|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

The view port:<code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</code>. This will make the browser render the width of the page at the width of its own screen.
This article gives more information for the viewport meta tags:
<a href="https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag" rel="noreferrer">https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag</a>

blocks|key|4465158|text|如果您使用的是bootstrap，您可以简单地将容器类更改为class+=+"+container+-fluid“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4465159|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you are using bootstrap, you could simply change your container class to class = "container-fluid"

blocks|key|4465188|text|可以使用for+make+response|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4465189|1.width=+device+-width+part将页面宽度设置为跟随设备的屏幕宽度(根据设备的不同而有所不同)。2.initial-scale=1.0+part设置浏览器首次加载页面时的初始缩放级别。例如，meta+name="viewport“content=”width=设备宽度，初始比例=1.0“|4465190|一些附加规则:+1.不要使用大的固定宽度元素2.不要让内容依赖于特定的视口宽度来很好地呈现3.使用CSS媒体查询为小屏幕和大屏幕应用不同的样式|4465191|您还可以使用media属性并应用屏幕样式的css。|4465192|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

you can use for make response

1.width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
2.initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
e.g. meta name="viewport" content="width=device-width, initial-scale=1.0"

some additional rules:
1. Do NOT use large fixed width elements 
2. Do NOT let the content rely on a particular viewport width to render well 
3. Use CSS media queries to apply different styling for small and large screens

also you can use media property and apply screen wise css.

blocks|key|4465011|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4465012|仅当窗口被加载而不是重新调整大小时有效|4465013|calculateNewScale()函数只是尝试调整您在px中设置的字体大小的正文-将它们更改为%25或rem|4465014|我知道你不希望网站响应，但设置CSS媒体查询可以帮助你得到你想要的。|4465015|entityMap^0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|I|7|@]|8|@]|9|$]]|$1|A|3|B|4|5|6|J|7|@]|8|@]|9|$]]|$1|C|3|D|4|5|6|K|7|@]|8|@]|9|$]]|$1|E|3|F|4|5|6|L|7|@]|8|@]|9|$]]|$1|G|3|-4|4|5|6|M|7|@]|8|@]|9|$]]]|H|$]]

&lt;meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> 
works only when the window is loaded not re-sized

calculateNewScale() function just tries to resize the body
Your font size are set in px - change them to % or rem

I know you dont want the site responsive but setting CSS media queries can help with what you want.

blocks|key|4465298|text|使用纯转换:+scale(x)，您将遇到很多边界、居中和定位问题，除非您使用一些javascript逻辑进行补偿。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4465299|您可以执行以下一些CSS操作：|4465300|1)您可以根据浏览器宽度设置主背景比例，方法是：|4465301|body+{+
++background-size:+cover;
++background-repeat:+no-repeat;
}|code-block|syntax|javascript|4465302|2)您可以将所有基于大众单位的测量单位设置为类似于：|4465303|Font+scaling+based+on+width+of+container|offset|length|4465304|例如，如果您希望字体与宽度成比例缩放，则可以设置|4465305|body+{
++font-size:+0.835vw;+//around+14px+at+1920px
}|4465306|另一个例子是，如果您想要一个高300px、宽1920px的容器根据宽度进行缩放，您可以将该容器|4465307|.container+{
++height:+150vw;+//around+300px+at+1920px
}|4465308|想必你不是想把页脚放在所有大小的底部吧？否则，您可以只在页脚上使用position:fixed；。|4465309|此外，如果你保持一个固定的长宽比，如果浏览器的高度比宽度高，你将会有非常有趣的间距。你确定这是你想要的吗？|4465310|请记住，这是一种非常奇怪的调整内容大小的方式，这可能会导致性能和可靠性问题(这一点你是知道的)。大多数人会建议只对设备使用meta标签，或者使元素具有响应性。|4465311|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container^0|0|0|0|0|0|0|14|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1F|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1G|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1H|8|@]|9|@$O|1I|P|1J|1|1K]]|A|$]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@]|A|$]]|$1|S|3|T|5|H|7|1M|8|@]|9|@]|A|$I|J]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|H|7|1O|8|@]|9|@]|A|$I|J]]|$1|Y|3|Z|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1R|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]]]

Using pure transform: scale(x), you are going to run into a lot of margin, centering, and positioning issues, unless you compensate with some javascript logic.

Some CSS things you can do:

1) You can make the main background scale based on browser width by applying

<pre><code>body { 
 background-size: cover;
 background-repeat: no-repeat;
}
</code></pre>

2) You can make all measurement units based on vw units similar to this:

<a href="https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container">Font scaling based on width of container</a>

for instance, if you want your fonts to scale proportionate to your width, you can set

<pre><code>body {
 font-size: 0.835vw; //around 14px at 1920px
}
</code></pre>

Another example is if you want a container that is 300px high at 1920px width to scale based on width, you can make that container

<pre><code>.container {
 height: 150vw; //around 300px at 1920px
}
</code></pre>

Presumably you are not trying to keep the footer at the bottom at all sizes? Otherwise you can just use position:fixed; on the footer.

Also, if you keep a fixed aspect ratio, you are going to have very funny spacing if the browser height is taller than the width. Are you sure this is what you want?

Keep in mind, this is a very odd way to resize content which could result in performance and readibility issues (which you are aware). Most people would recommend just using a meta tag for devices, or making your elements responsive.

I would like to create a website that is not responsive, but if the windows are resized, everything is scale up / down, and keep the same ratio. It doesn't matter if the words are too small in small screen, the first priority is to prevent the element overlap when resize

I have tried using:

<pre><code>&lt;meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"&gt;
</code></pre>

And

<pre><code>&lt;script type="text/javascript"&gt;
 $(document).ready(function () {

 $(window).resize(function () {
 calculateNewScale();
 });

 calculateNewScale(); // if the user go to the page and his window is less than 1920px

 function calculateNewScale() {
 var percentageOn1 = $(window).width() / 1920);
 $("body").css({
 "-moz-transform": "scale(" + percentageOn1 + ")",
 "-webkit-transform": "scale(" + percentageOn1 + ")",
 "transform": "scale(" + percentageOn1 + ")"
 });
 }
 });
</code></pre>

And also with CSS

<pre><code>body {
width:100vw;
height:100vh;
}
</code></pre>

The website is here:

<pre><code>kotechweb.com/new_focus/page/about_us
</code></pre>

The problem is, right now the content is overlapped when resized.

Scale the entire body when resizing the window

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想创建一个没有响应的网站，但如果窗口被调整大小，一切都是放大/缩小，并保持相同的比例。如果字在小屏幕上太小并不重要，当务之急是防止调整大小时元素重叠我尝试过使用：<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0...

问调整窗口大小时缩放整个正文
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整窗口大小时缩放整个正文EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整窗口大小时缩放整个正文
EN