Amgalang 发表于 2024-8-22 23:49:36

网页的自适应显示请求，有偿寻求帮助

大家好，

我使用 Bootstrap 开发了一个网页，但遇到的问题是网页无法根据不同电脑的分辨率进行【自适应显示】。
我想有偿寻求帮助解决这个问题，网页里就三个模块，很简约的。如果您在这方面有经验，麻烦加我一下 QQ:1556434735，非常感谢。
本人急需解决这个问题，真心请教，期待您的回复。谢谢！

网址：http://mrdp.net/


FishC 发表于 2024-8-22 23:49:51

您好，鱼油！根据您的描述，网页无法根据不同分辨率进行自适应显示，可能是某些自适应设计的基础规则没有正确应用。

对于这种情况，可以从以下几个方面入手进行排查：

1. **确保引入了正确的 Bootstrap 样式文件**：
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

2. **在 `<head>` 部分添加视口元标签**，确保正确缩放：
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

3. **使用 Bootstrap 的栅格系统** 来布局模块，确保不同分辨率下能够灵活调整：
   <div class="container">
       <div class="row">
         <div class="col-md-4">模块1</div>
         <div class="col-md-4">模块2</div>
         <div class="col-md-4">模块3</div>
       </div>
   </div>

4. **检查自定义样式**，有时自定义的 CSS 会覆盖 Bootstrap 的样式，造成自适应问题。

如果这些方法依旧无法解决问题，您可以通过 QQ 联系合适的技术人员获取详细的帮助。希望这些建议对您有帮助！如有其他问题，欢迎继续提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Amgalang 发表于 2024-8-23 12:04:06

服务器有点不稳定，现在直接上本地的代码，希望大佬看看，谢谢：



以下是index.html文件中的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reverse Dictionary</title>
    <style>
      body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: start;
            height: 100vh;
            margin: 0;
      }
      #title {
            margin-top: 20px;
            text-align: center;
      }
      iframe {
            width: 100%;
            height: 100%;
            border: none;
      }
      h1 {
            font-size: 50px;
      }
    </style>
</head>
<body>
    <div id="title">
      <h1>Mongolian Reverse Dictionary</h1>
    </div>
    <!-- Including search.html using iframe -->
    <iframe src="/search" name="searchFrame"></iframe>
</body>
</html>







以下是search.html文件中的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mongolian Reverse Dictionary</title>
    <linkrel="stylesheet">
    <link rel="stylesheet" >
    <style>
      @font-face {
            font-family: 'MongolianFont';
            src: url('/static/fonts/MQG8F02.ttf') format('truetype');
      }
      body {
            display: flex;
            flex-direction: column;
            writing-mode: vertical-lr;
            -webkit-writing-mode: vertical-lr;
            -moz-writing-mode: vertical-lr;
            -o-writing-mode: vertical-lr;
            font-family: 'MongolianFont', sans-serif;
      }
      .content-wrapper {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
      }
      .search-container {
            transform: rotate(90deg);
            transform-origin: left top;
            margin-left: 200px;
            margin-top: 15px;
      }
      #search-box {
            writing-mode: horizontal-tb;
            width: 87vh;
            height: 1.5cm;
      }
      #results {
            writing-mode: horizontal-tb;
            margin-top: -65px;
            margin-left: 7.2cm;
            display: flex;
            flex-direction: column;
      }
      .item {
            writing-mode: vertical-lr;
            font-size: 25px;
      }
      .word-box {
            padding: 5px;
      }
      #search-button {
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 5px;
            padding-right: 5px;
      }
      .flex-column {
            display: flex;
            flex-direction: column;
      }
      .flex-row {
            display: flex;
            flex-direction: row;
      }
      .item-container {
            display: flex;
            flex-direction: column; /* Adjust direction for vertical alignment */
            align-items: center; /* Center items for consistent appearance */
      }
      .order-number {
            margin-bottom: 5px; /* Space between order number and word box */
            font-size: 25px;
      }
      .word-box {
            /* Styles remain unchanged, ensure it's suitable for vertical text */
            display: inline-block; /* Adjust display to accommodate vertical text */
            padding: 5px;
            writing-mode: vertical-lr; /* Ensure text orientation is vertical */
            flex-grow: 1;
            font-size: 25px;
            cursor: pointer;
      }
      .translation-layer {
            position: absolute;
            display: none;
            background-color: white;
            border: 1px solid #ccc;
            z-index: 1000;
            padding: 10px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      }
      .translation-box {
            background-color: white;
            padding: 20px;
            writing-mode: horizontal-tb;
            display: flex; /* Ensure it's still a flex container */
            flex-direction: column; /* Stack children vertically */
            justify-content: space-between; /* Space out children */
            height: 100%; /* Ensure it takes full height */
      }
    </style>
</head>
<body>
    <div class="content-wrapper">
      <div class="search-container">
            <input type="text" id="search-box" class="form-control" placeholder="ᠡᠷᠢᠬᠦ ᠦᠭᠡ ᠶᠢᠨ ᠢᠶᠡᠨ ᠳᠦᠷᠰᠦᠯᠡᠯ ᠢ ᠣᠷᠣᠭᠤᠯᠤᠭᠠᠷᠠᠢ᠂ ᠡᠰᠡᠪᠡᠯ &#128269; ᠳᠠᠷᠤᠪᠴᠢ ᠶᠢ ᠳᠠᠷᠤᠵᠤ ᠵᠢᠱᠢᠶ᠎ᠡ ᠶᠢ ᠦᠵᠡᠭᠡᠷᠡᠢ">
            <button class="btn btn-primary" id="search-button">
                <i class="fa fa-search"></i>
            </button>
      </div>
      <div id="results" class="d-flex flex-column">
            <!-- Predefined columns for results -->
            <div id="column1" class="flex-row"></div>
            <div id="column2" class="flex-row"></div>
            <div id="column3" class="flex-row"></div>
            <div id="column4" class="flex-row"></div>
      </div>
    </div>
    <div id="translation-layer" class="translation-layer">
      <div id="translation-box" class="translation-box"></div>
    </div>
    <!-- Loading Spinner -->
    <div id="loading" style="display: none;">
      <div class="d-flex justify-content-center">
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>
      </div>
    </div>
   
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
   
    <script>
      $(document).ready(function(){
            $("#loading").hide();
            if(sessionStorage.getItem('example_index') == undefined) sessionStorage.setItem('example_index', 0);
            else sessionStorage.setItem('example_index', (sessionStorage.getItem('example_index') + 1) % 4);
            // Function to create default items with colors
            function createDefaultItems() {
                for (var i = 0; i < 100; i++) {
                  var columnIndex = Math.floor(i / 25);
                  var column = $("#column" + (columnIndex + 1));
                  var color = `rgba(0, 90, 255, ${0.5 - i/100 * 0.45})`;
                  var itemStyle = 'background-color: ' + color + ';';
                  
                  var itemContainer = $('<div class="item-container"></div>');
                  itemContainer.append($('<span class="order-number">' + (i + 1) + '. </span>'));
                  var item = $('<span class="word-box" style="' + itemStyle + '">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>'); // Empty content
                  itemContainer.append(item);
                  
                  column.append(itemContainer);
                }
            }

            // Create default items on page load
            createDefaultItems();
            $("#search-button").click(function(){
                $("#loading").show();
                var description = $("#search-box").val();
                let examples = ['ᠲᠡᠩᠬᠡᠭᠡ ᠪᠦᠬᠦᠢ᠂ ᠴᠢᠳᠠᠯ ᠲᠡᠩᠬᠡᠭᠡ ᠶᠡᠬᠡᠲᠡᠢ᠂ ᠪᠢᠷ᠎ᠠ ᠴᠢᠳᠠᠯ ᠲᠠᠢ᠃', 'ᠰᠠᠨᠠᠭ᠎ᠠ ᠪᠤᠳᠤᠯ ᠢ ᠲᠠᠶᠢᠳᠬᠤᠷᠠᠭᠤᠯᠬᠤ᠂ ᠰᠡᠳᠬᠢᠯ ᠰᠠᠨᠠᠭ᠎ᠠ ᠶᠢ ᠠᠭᠤᠵᠢᠮ ᠪᠣᠯᠭᠠᠬᠤ᠃', 'ᠤᠴᠢᠷ ᠶᠠᠪᠤᠳᠠᠯ ᠤᠨ ᠮᠠᠰᠢ ᠪᠦᠲᠦᠮᠵᠢ ᠲᠠᠢ ᠪᠠᠷ ᠥᠭᠡᠳᠡᠯᠡᠨ ᠳᠠᠪᠰᠢᠬᠤ', 'ᠰᠡᠴᠡᠨ ᠰᠡᠷᠭᠦᠯᠡᠩ']
                if(description == '')
                {
                  description = examples;
                  $("#search-box").val(description);
                }
                // Clear existing results in each column
                $("#results .flex-row").empty();
                $.get("/getWords?description=" + description, function(data){
                  var words = data; // Assuming data is a list of strings
   
                  // Distribute words across columns
                  for (var i = 0; i < words.length; i++) {
                        var columnIndex = Math.floor(i / 25);
                        var column = $("#column" + (columnIndex + 1));
                        var itemNumber = i % 25 + 1;
                        var color = `rgba(0, 90, 255, ${0.5 - i/100 * 0.45})`;
                        var itemStyle = 'background-color: ' + color + ';';
                        
                        var itemContainer = $('<div class="item-container"></div>');
                        itemContainer.append($('<span class="order-number">' + (i + 1) + '. </span>'));
                        var item = $('<span class="word-box" style="' + itemStyle + '">' + words + '</span>');
                        itemContainer.append(item);
                        
                        column.append(itemContainer);
                  }
                  $("#loading").hide();
                });
            });

            $(document).click(function(event) {
                if (!$(event.target).closest('.translation-layer, .word-box').length) {
                  $('#translation-layer').hide();
                }
            });

            function getTranslations(word, position) {
                $.get('/getTranslations?word=' + word, function(response) {
                  if (response.result === 'success') {
                        const groupedTranslations = {};
                        var translationsHtml = '';
                        // 遍历所有翻译，并按origin分组
                        Object.keys(response).forEach(key => {
                            if (key !== "result") {
                              translationsHtml += '<div style="flex-grow: 1;">'; // Flex container for translations
                              response.forEach((translation, index) => {
                                    translationsHtml += (index + 1) + '. ' + translation + '<br>';
                              });
                              translationsHtml += '</div><div style="text-align: right;"><u>' + key + '</u></div>'; // New div for origin, aligned right
                            }
                        });
                        var $translationLayer = $('#translation-layer');
                        $translationLayer.html(translationsHtml)
                                        .css({
                                          'left': position.left + position.width + 10 + 'px',
                                          'top': position.top + 'px'
                                        })
                                        .show();
                  }
                });
            }

            $('#results').on('click', '.word-box', function() {
                var word = $(this).text().trim();
                var wordPosition = $(this).offset();
                wordPosition.width = $(this).width(); // Add width to the position object
                getTranslations(word, wordPosition);
            });

      });
    </script>
   
</body>
</html>

FishC 发表于 2024-8-23 12:04:13

Amgalang 发表于 2024-08-23 12:04
服务器有点不稳定，现在直接上本地的代码，希望大佬看 ...

您好，鱼油。根据您的代码，以下是一些基本建议，确保您的网页在不同分辨率下自适应：

1. **使用Bootstrap的栅格系统**：
   在您的`index.html`和`search.html`中，可以使用Bootstrap的栅格系统来确保元素在不同设备上有良好的布局。

例如，替换您的HTML中的某部分代码如下：
```html
<div class="container">
    <div class="row">
      <div class="col-md-4">
            <!-- Your content here -->
      </div>

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

feiyu999 发表于 2024-8-23 17:27:18

写个全集化自适应CSS样式嵌入

Amgalang 发表于 2024-8-24 08:58:57

feiyu999 发表于 2024-8-23 17:27
写个全集化自适应CSS样式嵌入

好的，谢谢您
页: [1]
查看完整版本: 网页的自适应显示请求，有偿寻求帮助