Fatal编程技术网
  • javascript/
  • Javascript 我的网页在同一个浏览器中有不同的视图，但另一台计算机有相同的英寸

Javascript 我的网页在同一个浏览器中有不同的视图，但另一台计算机有相同的英寸

javascript html css django

Javascript 我的网页在同一个浏览器中有不同的视图，但另一台计算机有相同的英寸,javascript,html,css,django,Javascript,Html,Css,Django,您好，我刚刚部署了我的Django项目，一切都很好，但在我用第二台计算机打开我的网页后，我发现网页有了另一种外观。我只是认为这是因为我的第二台电脑是旧的，但我的朋友有同样丑陋的外观。我只是想知道为什么会发生这种情况，因为我们都使用chrome，而且我们的电脑都是16英寸。所以应该是一样的。我问这个问题的主要原因是因为在丑陋的视图中，字体太大了，我的jumbotron的一部分无法放入网页，所以我无法阅读。另外，我在底部的页脚和顶部的导航栏都非常大。我会发布我的html和图片，这样你可以理解我说的话

您好，我刚刚部署了我的Django项目，一切都很好，但在我用第二台计算机打开我的网页后，我发现网页有了另一种外观。我只是认为这是因为我的第二台电脑是旧的，但我的朋友有同样丑陋的外观。我只是想知道为什么会发生这种情况，因为我们都使用chrome，而且我们的电脑都是16英寸。所以应该是一样的。我问这个问题的主要原因是因为在丑陋的视图中，字体太大了，我的jumbotron的一部分无法放入网页，所以我无法阅读。另外，我在底部的页脚和顶部的导航栏都非常大。我会发布我的html和图片，这样你可以理解我说的话，非常感谢

注意：对于主页，我有一个带导航栏的base.html和一个homepage.html

{% extends "base.html" %}
{%block content%}
<body>
<div class='bir' style="background-image: url(https://cdn.pixabay.com/photo/2014/04/02/17/06/honeycomb-307936_960_720.png);">

<div style="text-align:center;"class="container">

    <h6 style="color:red;"><span class="baslik">ITU CAMPUS</span>BETA</h6>
</div>
<br>
<br>
<div class=" container jumbotron">
  <p class="lead">ITU CAMPUS'E HOŞGELDİNİZ!</p>
  <hr class="my-4">
  <p class='homep'>Bu Platform İstanbul Teknik Üniversitesi öğrencileri tarafından yine İstanbul Teknik Üniversitesi öğrencileri için tasarlanmış bir sayfadır.</p>
    <p class='homep'>Burada İTÜ Haberlerini takip edebilir, Not Dağılımlarını bulabilir, İlan verebilir, Ders programı oluşturabilir, Forumda boş yapabilir ve Sorularına cevap bulabilirsin.</p>
    <hr class="my-4">
    <p class='homep'>İTU CAMPUS şuanda gelişim aşamasındadır, bundan dolayı bazı özellikler şuanda daha erişime açılmamıştır(ders programı oluşturma,profil sekmesi, mobil görünüm, chat odaları vb.)</p>
    <p class='homep'>Ancak bu eksiklikler <a target="_blank" style="text-decoration:none;color:blue;" href="https://sozluk.gov.tr/?kelime=peyderpey">peyderpey</a> giderilecektir. Bu platformu canlandırmak ve büyütmek için desteğinize ihtiyacımız var.</p>
</div>

<footer style="background-color:#002855;bottom:0;position:fixed;">
<p class='dip 'style="font-size:13px;">Lütfen paylaşmak istediğiniz Not Dağılımlarını <a style="text-decoration:none;"href="mailto:itucampusdestek@gmail.com">itucampusdestek@gmail.com</a> adresine hoca ismi, dönem bilgisi ve ders adıyla gönderin.</p>
<p class='dip'>Tüm haklar İTÜ CAMPUS Team'e aittir.</p>
</footer>
</body>
<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat:900i&display=swap');
    .baslik{
        font-family sans-serif;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size:70px;
        letter-spacing:0.2em;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke-width: 4px;
      -webkit-text-stroke-color: #002855;
    }

    .bir {
    height: 100vh;
}
@media only screen and (max-width: 1250px) {
    h6{
    font-size:xx-large !important;
    }
.homep,.lead{
    font-size:xx-large !important;
}
.dip{
    font-size:x-large !important;
}
h6{
    margin-top:50px !important;
}
}
</style>

{% endblock content%}
base.html

<!DOCTYPE html>
{% load static %}
{% load crispy_forms_tags %}

<html lang="en" dir="ltr">
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="background-color:#FF9900;;">
        <nav style="background-color:#002855;"class="navbar navbar-expand-lg navbar-light fixed-top">
        <a style="color:white;" class="navbar-brand" href="{% url 'homepage:homepage'%}">ITU CAMPUS</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a style="color:white;" class="nav-link" href="{% url 'distribution:home' %}">Not Dağılımları<span class="sr-only">(current)</span></a>
            </li>
                    <li class="nav-item active">
                        <a style="color:white;" class="nav-link" href="{% url 'forum:post' %}">Forum<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <a style="color:white;" class="nav-link" href="{% url 'ad:ad' %}">İlanlar<span class="sr-only">(current)</span></a>
            </li>
                    <li class="nav-item active">
                        <a style="color:white;" class="nav-link" href="{% url 'question:question' %}">Soru<span class="sr-only">(current)</span></a>
            </li>
                    <li class="nav-item active">
                        <a style="color:white;" class="nav-link" href="{% url 'newstudentwp:home' %}">2020 Girişliler<span class="sr-only">(current)</span></a>
            </li>
                    {% if user.is_authenticated%}
                    {% else %}
            <li class="nav-item active">
                <a style="color:red;" class="nav-link" href="{% url 'account:register' %}">Kayıt Ol <span class="sr-only">(current)</span></a>
            </li>
                    {% endif %}
        </ul>
        <span class="navbar-text">
                {% if user.is_authenticated%}
                <a style="color:white;" class="oturum dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-decoration:none;">
          {{user.username}}
        </a>
                <div style="background-color:#002855;"class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a style="color:white;"class="dropdown-item disabled" href="#">Profil</a>
                    <div class="dropdown-divider"></div>
                    <a style="color:white;"class="dropdown-item" href="{% url 'account:logout' %}">Çıkış Yap</a>
                {% else %}
                <a style="color:white;"  class='oturum' href="{% url 'account:login' %}" style="text-decoration:none;" >Oturum Aç</a>
                {% endif %}
        </span>
    </div>
    </div>
    </nav>



        {%block content%}
        {%endblock content%}
    </body>
</html>

<style >
.dropdown-menu{
    right:0;
    left:auto;
}
footer {
    background-color: #f8f8f8;
    right: 0;
    bottom: 0px;
    left: 0;
    padding: 1rem;
    color: #9d9d9d;
    text-align: center;
}
    .container{
        padding-top: 70px;
    }
    a{
        color:white;
    }
    .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
     .navbar-toggler {
  border-color:white!important;
}
    @media only screen and (max-width: 1250px) {
.nav-item,.navbar-brand,.oturum{
    font-size:x-large !important;
}
.dropdown-menu{
    right:auto;
    left:0;
}
}
</style>


{%load static%}
{%load crispy_forms_tags%}

    

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 
{%if user.u是否经过身份验证%}
{%else%}

  • 

    • 
{%endif%}


{%if user.u是否经过身份验证%}
{%else%}
{%endif%}
{%block content%}
{%endblock内容%}
.下拉菜单{
右：0；
左：自动；
}
页脚{
背景色：#F8；
右：0；
底部：0px；
左：0；
填充：1rem；
颜色：#9d9d9d；
文本对齐：居中；
}
.集装箱{
填充顶部：70px；
}
a{
颜色：白色；
}
.navbar切换图标{
背景图像：url（“数据：image/svg+xml；charset=utf8，%3Csvg viewBox='0 32'xmlns='0http://www.w3.org/2000/svg“%3E%3Cpath stroke='white'stroke width='2'stroke linecap='round'stroke miterlimit='10'd='M4 8H224M4 16h24M4 24h24'/%3E%3C/svg%3E”）！重要信息；
}
.导航杆切换器{
边框颜色：白色！重要；
}
@仅介质屏幕和（最大宽度：1250px）{
.nav项目、.navbar品牌、.oturum{
字体大小：x-large！重要信息；
}
.下拉菜单{
右：自动；
左：0；
}
}
homepage.html

{% extends "base.html" %}
{%block content%}
<body>
<div class='bir' style="background-image: url(https://cdn.pixabay.com/photo/2014/04/02/17/06/honeycomb-307936_960_720.png);">

<div style="text-align:center;"class="container">

    <h6 style="color:red;"><span class="baslik">ITU CAMPUS</span>BETA</h6>
</div>
<br>
<br>
<div class=" container jumbotron">
  <p class="lead">ITU CAMPUS'E HOŞGELDİNİZ!</p>
  <hr class="my-4">
  <p class='homep'>Bu Platform İstanbul Teknik Üniversitesi öğrencileri tarafından yine İstanbul Teknik Üniversitesi öğrencileri için tasarlanmış bir sayfadır.</p>
    <p class='homep'>Burada İTÜ Haberlerini takip edebilir, Not Dağılımlarını bulabilir, İlan verebilir, Ders programı oluşturabilir, Forumda boş yapabilir ve Sorularına cevap bulabilirsin.</p>
    <hr class="my-4">
    <p class='homep'>İTU CAMPUS şuanda gelişim aşamasındadır, bundan dolayı bazı özellikler şuanda daha erişime açılmamıştır(ders programı oluşturma,profil sekmesi, mobil görünüm, chat odaları vb.)</p>
    <p class='homep'>Ancak bu eksiklikler <a target="_blank" style="text-decoration:none;color:blue;" href="https://sozluk.gov.tr/?kelime=peyderpey">peyderpey</a> giderilecektir. Bu platformu canlandırmak ve büyütmek için desteğinize ihtiyacımız var.</p>
</div>

<footer style="background-color:#002855;bottom:0;position:fixed;">
<p class='dip 'style="font-size:13px;">Lütfen paylaşmak istediğiniz Not Dağılımlarını <a style="text-decoration:none;"href="mailto:itucampusdestek@gmail.com">itucampusdestek@gmail.com</a> adresine hoca ismi, dönem bilgisi ve ders adıyla gönderin.</p>
<p class='dip'>Tüm haklar İTÜ CAMPUS Team'e aittir.</p>
</footer>
</body>
<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat:900i&display=swap');
    .baslik{
        font-family sans-serif;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size:70px;
        letter-spacing:0.2em;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke-width: 4px;
      -webkit-text-stroke-color: #002855;
    }

    .bir {
    height: 100vh;
}
@media only screen and (max-width: 1250px) {
    h6{
    font-size:xx-large !important;
    }
.homep,.lead{
    font-size:xx-large !important;
}
.dip{
    font-size:x-large !important;
}
h6{
    margin-top:50px !important;
}
}
</style>

{% endblock content%}

{%extends“base.html”%}
{%block content%}
国际电信联盟坎普斯贝塔酒店





国际电信联盟校园网



塔萨兰姆比尔萨伊法德的斯坦布尔-特克尼奇大学平台（stanbul-Teknik-niversitesiğrencileri tarafından yineİstanbul-Teknik-niversitesiğrencileriç


BuradaİTÜHaberlerini takip edebilir，而不是Dağlımlarınıbulabilir，İlan verebilir，Ders programİoluşturabilir，Forumda bo yapabili ve Sorularına cevap bulabilir sin




TU CAMPUSşuanda gelişim aşamasţndadţr，bundan dolayţbazţzelliklerşuanda daha erişime aţlmamţtţr（项目包括turma、profil sekmesi、mobil görünüm、chat odalar vb）


我不喜欢吉德里莱克提尔。但是，平台可以让你的生活变得更加自由

Lütfen paylaşmak istediğinizing而不是DağLımlarınıadresine hoca ismi，dönem bilgisi已经成为了一名年轻人


Tüm haklarİTÜTÜTÜTÜTÜe Aitir校园团队

@导入url（'https://fonts.googleapis.com/css?family=Montserrat:900i&display=swap');
巴斯利克先生{
字体系列无衬线；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：70px；
字母间距：0.2米；
-webkit文本填充颜色：透明；
-webkit文本笔划宽度：4px；
-webkit文本笔划颜色：#002855；
}
比尔先生{
高度：100vh；
}
@仅介质屏幕和（最大宽度：1250px）{
h6{
字体大小：xx大！重要；
}
.homep、.lead{
字体大小：xx大！重要；
}
.迪普{
字体大小：x-large！重要信息；
}
h6{
利润上限：50px！重要；
}
}
{%endblock内容%}
这不是编码错误，只是试着让你的网页有响应性，以便在不同的计算机和浏览器上看起来相同。。。我希望这会对你有所帮助。

重要的不是电脑屏幕的英寸，而是像素密度。检查两台计算机上的屏幕分辨率。很可能你有不同的解决方案。有什么可以避免的吗？正如我提到的，它不清楚。也许我可以建立一个初始的解决方案？我是说我的html在上面是的，我能做到，伙计，我能做到，这只是时间问题，请投票给我answer@EkremÜçççncç你能把它贴在这里吗？让我们。