仅使用 CSS 或 Java 自动调整 HTML 内容

Question

我正在为PlayStation 3系统制作几个网页，它只支持html，一些css和javascript

我不知道这些编码，但我设法完成了 html

这是我制作的页面

<html>
   <head>
      <title>PlayStation® Radio</title>
   </head>
   <script>
      javascript:window.resizeTo(screen.width,screen.height)
   </script>
   <body onload="changeScreenSize()">
      <style>
         body { background-image:url("http://raw.githubusercontent.com/LuanTeles/PS3-4K-Pro/main/Web_Pages/media/radio.png");
         background-size: 100% auto; 
         background-attachment: scroll;
         margin-top: 3%; 
         margin-left: 8%; 
         margin-right: 8%; 
         marginbottom: 8%;}
         body {background-color:#000000;}
         body {color:white;}
         }
      </style>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <script type="text/javascript" src="http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/script/flash_objects.js"></script>
      <div id="player_936" align="center">
         <script type="text/javascript">
            var flashvars_936 = {};
            var params_936 = {
                quality: "low",
                wmode: "transparent",
                bgcolor: "#ffffff",
                allowScriptAccess: "always",
                allowFullScreen: "true",
                flashvars: "fichier=http://github.com/LuanTeles/ScreenSavers/releases/download/Winamp/Winamp_Visualization.mp4&auto_play=true&apercu=http://raw.githubusercontent.com/LuanTeles/PS3-4K-Pro/main/Web_Pages/media/visualizer_preview.png"
            };
            var attributes_936 = {};
            flashObject("http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/swf/video_player/video_player_28.swf", "player_936", "1080", "660", "8", false, flashvars_936, params_936, attributes_936);
         </script>
      </div>
      <div id="player_9428" align="center">
         <script type="text/javascript">
            var flashvars_9428 = {};
            var params_9428 = {
                quality: "low",
                wmode: "transparent",
                bgcolor: "#ffffff",
                allowScriptAccess: "always",
                allowFullScreen: "true",
                flashvars: "url=http://relay.181.fm:8128&autostart=yes"
            };
            var attributes_9428 = {};
            flashObject("http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/swf/music_player/music_player_6.swf", "player_9428", "1080", "35", "8", false, flashvars_9428, params_9428, attributes_9428);
         </script>
      </div>
   </body>
</html>

在 1080p 分辨率下看起来很棒

1080p

但以 720 为例，它看起来很糟糕

720p

如何使其适应不同的分辨率？

Answer 1

要修复您的代码，首先，您编写代码的许多实践/方式可以写得更好，以使其更整洁并运行得更快。我不太确定，但我猜其中一些可能是为了专门支持/适用于 PS3 而编写的，但这里是最重要的，不应该把事情弄乱（或至少太多）：

javascript 默认情况下会在
```
<script>
```
标签中正常运行，因此您无需将属性
```
type="text/javascript"
```
放在每个标签上
网址中所有写“http”的地方都应该替换为“https”
```
<style>
```
标签不应位于
```
<body>
```
标签内，而应位于
```
<head>
```
标签中。

现在，为了回答原来的问题，以下是一些可能有助于解决分辨率问题的方法：

在

<head>

标签内，尝试放置

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

。这应该出现在每个网站中，并确保内容的比例在不同屏幕上保持相同。

您还有大约 5000 个

<br>

标签，这些标签迟早会把事情搞砸，所以您可能想删除一些标签，看看它是否能解决您的问题。

您还可以使用 JavaScript 或 CSS 媒体查询来检查屏幕分辨率，然后确定是否使内容变小或变大。

仅使用 CSS 或 Java 自动调整 HTML 内容

问题描述投票：0回答：1

1个回答

最新问题

仅使用 CSS 或 Java 自动调整 HTML 内容

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1