个人中心
gpt4 book ai didi

html - 桌面网页无法正确显示元名称 = viewport

转载 作者：太空宇宙 更新时间：2023-11-03 18:00:17 25 4
gpt4 key购买 nike

我很困惑，因为我尝试了所有可能的标签组合。不幸的是，没有任何效果。

我的技术堆栈是 AngularJS/Ruby on Rails，我将 meta 标记放在一个几乎是头文件的 rails html 文件中

<!DOCTYPE html>
<html ng-app="DoctiblePreTreatment">
<head>
<title>Doctible</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <%= csrf_meta_tag %>
    <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
    <%= stylesheet_link_tag "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
    <%= favicon_link_tag 'favicon.ico' %>
    <%= yield(:head) %>

    <meta property="og:type" content="website" />
    <meta property="og:title" content="<%= provider_name %> at Doctible" />
    <meta property="og:site_name" content="Doctible" />
    <meta property="og:image" content="<%= provider_photo_url %>" />
    <meta property="og:description" content="<%= provider_description %>" />
    <meta property="fb:app_id" content="707885949284586" />

<!-- open sans font -->

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="page-header" class="row">
<a class="navbar-brand" href="/" target="_self">
        <img src="/assets/logo-transparent.png" alt="doctible"></img>
    </a>
    <div class="header-search-bar" style="float:left">
        <span ng-controller="FrontpageCtrl" class="navbar-controller">
            <span ng-if='location.path() == "/search_results" && location.search().type == "treatment"'>
                <form name="searchTreatmentForm" ng-submit="searchTreatment($item)" novalidate>
                    <div class="input-group" style="width: 500px">
                        <input type="text" ng-model="$parent.async_selected_treatment" placeholder="Which treatment?" typeahead="treatment.description for treatment in getTreatment($viewValue)" typeahead-on-select="searchTreatment($item)" focus="true" class="form-control header-search-bar-field">
                        <span class="input-group-btn"><input type="submit" value="Search Treatment" class="header-search-bar-button"></span>
                    </div>
                </form>
            </span>
        </span>

        <span ng-controller="FrontpageCtrl" class="navbar-controller">
            <span ng-if='location.path() == "/search_results" && location.search().type == "doctor"'>
                <form name="searchDoctorForm" ng-submit="searchDoctor($item)" novalidate>
                    <div class="input-group" style="width: 500px">
                        <input type="text" ng-model="$parent.async_selected_doctor" placeholder="Doctor Name" typeahead="(doctor.first_name + ' ' + doctor.last_name + ' ' + doctor.address_1) for doctor in getDoctor($viewValue)" typeahead-editable="false" typeahead-on-select="searchDoctor($item)" focus="true" class="form-control header-search-bar-field">
                        <span class="input-group-btn"><input type="submit" value="Search Doctor" class="header-search-bar-button"></span>
                    </div>
                </form>
            </span>
        </span>

        <span ng-controller="FrontpageCtrl" class="navbar-controller">
            <span ng-if='location.path() == "/search_results" && location.search().type == "specialty"'>
                <form name="searchSpecialtyForm" ng-submit="searchSpecialty($item)" novalidate>
                    <div class="input-group" style="width: 500px">
                        <input type="text" ng-model="$parent.async_selected_specialty" placeholder="Specialty e.g. Dental, Primary Care" typeahead="specialty.name for specialty in getSpecialty($viewValue)" typeahead-editable="false" typeahead-on-select="searchSpecialty($item)" focus="true" class="form-control header-search-bar-field">
                        <span class="input-group-btn"><input type="submit" value="Search Specialty" class="header-search-bar-button"></span>
                    </div>
                </form>
            </span>
        </span>
    </div>

    <ul class="nav navbar-nav pull-right" style="height: 75px; line-height: 75px; margin-right: 30px">
        <li style="border: none !important">
            <span class="nav-text"><i class="fa fa-phone"></i>&nbsp;1-800-380-6071</span>
        </li>
        <li style="border: none !important">
            <% unless current_provider %>
                <span><a href="/providers/sign_up" class="nav-link" target="_self">ARE YOU A PROVIDER?</a></span>
            <% else %>
        <li style="border: none !important; margin-right: 20px; padding-top: 7px; cursor: pointer">
                    <div class="btn-group" dropdown>
                  <div class="dropdown-toggle" ng-disabled="disabled">
                            <div class="photo-wrap">
                                <img src="<%= current_provider.photo_1.url %>" style="vertical-align: top; width: 50px"/>
                            </div>
                            <span class="caret" style="margin-top: -19px;"></span>
                  </div>

                  <ul class="dropdown-menu pull-right" role="menu" style="padding: 12px 0">
                    <li><a href="/providers/appointments" target="_self">Your Appointments</a></li>
                    <li class="divider"></li>
                    <li><a href="/providers/profile/setup" target="_self">Account</a></li>
                    <li class="divider"></li>
                    <li><a href="/logout" target="_self">Log Out</a></li>
                  </ul>
                </div>
                </li>
          <% end %>
        </li>
    </div>
</div>

<%= yield(:content) %>

</body>
</html>

这是桌面上的 View enter image description here

手机版乱七八糟放大了 enter image description here

最佳答案

这将强制视口(viewport)在移动设备上呈现宽度为 1200 像素的页面(缩小):

<meta name="viewport" content="width=1200">

关于html - 桌面网页无法正确显示元名称 = viewport，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25580792/

25 4 0
文章推荐： c# - 如何使用 C# .NET 'Mark as read ' GMail 的邮件？
文章推荐： Ruby 需要错误
文章推荐： c# - 如何将 c# 变量合并到 javascript 函数的参数中
文章推荐： python - 使用 R 或 Python 对数据进行子集化
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com