0

在开发过程中，这是在我的 Chrome 和 Safari 桌面上进行的测试。而且我会减小窗口宽度，假设我看到的东西在移动设备上会是什么样子。

期望的结果（Safari 版本 6.0.5 (8536.30.1)）： 在此处输入图像描述

但是，我在 iPhone 上的移动 Safari 中打开了它，这是我所看到的：

在此处输入图像描述

我缺少哪些属性来减少移动设备上的宽度？

视图/布局/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Birthday</title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<div id="wrapper">
<div id="header">
    <div id="avatar"><%= image_tag "avatar.jpg" %></div>
    <h1>Drew Wyatt 24th Annual Nameday Celebration</h1>
</div>
<div id="main">

<%= yield %>

</div>
</div>
</body>
</html>

意见/列表/index.html.erb

<h2>The List</h2>
<p class="page_description">You asked for it, here it is: the ultimate 2013 birthday list for me, Drew Wyatt.
You can get me none of this, or all of this (although please don't - some of this is kindof expensive); this is just a list of ideas to get you started.</p>
<% @items.each do |item| %>
    <div class="item">
        <h3><%= item.name %></h3>
        <div class="image">
            <%= link_to(image_tag(item.image), item.link, target: "_blank")  %>
        </div>
        <p><%= item.description %></p>
        <span class="price"><%= number_to_currency item.price %></span><br /><br />
    </div>
<% end %>

应用程序.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

* {
    margin: 0;
    padding: 0;
}

a, a:hover {
    background: #fff;
    text-decoration: none;
}

#wrapper {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    height: 144px;
    display: block;
    position: relative;
    background: #f3b819;
}

#avatar {
        width: 145px;
        height: 147px;
        float: left;
    }
    h1 {
        position: absolute;
        bottom: 0;
        left: 160px;
        font-size: 30px;
        line-height: 32px;
    }

#main {
    padding: 10px;
}

p.page_description {
    font-size: 20px;
    line-height: 22px;
}

h2 {
    font-size: 24px;
    margin-bottom: 10px;
    border-bottom: 2px solid;
    padding-bottom: 2px;
}

h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

p {
    font-size: 14px;
    margin-bottom: 10px;
}

列表.css.scsss

// Place all the styles related to the List controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.item {
    height: auto;
    /*min-height: 160px;*/
    margin-bottom: 10px;

    .image {
        float: left;
        padding-bottom: 10px;
        padding-right: 10px;
    }

    .price {
        font-weight: bold;
    }

    span.link a {
        color: #f3b819;
        background: #fff;
        text-decoration: none;
        font-weight: bold;
        &:hover {
            background: #fff;
            text-decoration: underline;
        }
    }

    border-bottom: 2px solid #999;
}

.item:after {
      content: "";
      display: table;
      clear: both;
    }
4

1 回答 1

0

首先，将其添加到文档的开头：

<meta name="viewport" content="width=device-width">

然后开始使用@media样式表中的规则来设置特定的小屏幕样式。

于 2013-08-19T07:23:56.490 回答