Question

我正在试图弄清楚为什么我的布局在横向上在iPad（XCode仿真器）上观看时会被切断。这是多么奇怪的事情：即使我从布局中删除所有 css，我仍然会遇到同样的问题。我的猜测是它与我的视口设置或我的主布局文件中的其他内容有关：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0">
        <title>MyCV - Levi Hackwith</title>
        <link rel = "stylesheet" href = "/public/assets/css/app.css" />
        <link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
    </head>
    <body>
        <div id = "app">
            {{{body}}}
        </div>
    </body>
</html>

这是主要内容的标记：

<section id = "sidebar">
    <section class = "contact-info">
        <div class = "avatar">
            <img src = "https://www.gravatar.com/avatar/{{item.gravatar}}
                 ?s=400">
        </div>
        <hr />
        <ul>
            <li>
                <span class = "label">Name</span>
                <span>
                    {{item.firstName}} {{item.lastName}}
                </span>
            </li>
            <li>
                <span class = "label">Email</span>
                <span>
                    {{item.email}}
                </span>
            </li>
            <li>
                <span class = "label">Location</span>
                <span>
                    {{item.addresses.home.city}},
                    {{item.addresses.home.state}}
                </span>
            </li>
            {{#if item.sites.length}}
            <li>
                {{#each item.sites}}
                <a href = "{{this.url}}" target = "_blank">
                    <i class ="fa-icon {{this.icon}} fa">&nbsp;</i>
                </a>
                {{/each}}
            </li>
            {{/if}}
        </ul>
    </section>
</section>
<section id = "main-content">
    {{#each item.workHistory}}
    <div class = "work-history-item">
        <div class = "company-info">
            <span class = "company-name">{{name}}</span>
            <time datetime= "{{startDate}}">
                {{#formatDate startDate 'MMMM YYYY'}}{{/formatDate}} -
                {{#if endDate}}
                {{#formatDate endDate 'MMMM YYYY'}}{{/formatDate}}
                {{else}}
                Present
                {{/if}}
            </time>
        </div>
        <div>
            <div>
                <p class = "work-description">
                    {{description}}
                </p>
            </div>
        </div>
        <div class = "skill-list">
            {{#each skills}}
            <span class = "label">{{this.name}}</span>
            {{/each}}
        </div>
    </div>
    {{/each}}
</section>

可在此处找到该应用的实时演示：http://digitalresume.herokuapp.com/users/54530e03c575dc86d61d22f8

为了查看问题，您需要使用开发工具删除css。

Answer 1

这个问题的答案令人沮丧地简单：iPad模拟器和Chrome设备模拟器都已损坏，并在横向模式下为您提供错误的布局。很抱歉浪费了所有人的时间。

即使没有应用CSS，Ipad也会在横向模式下切断文本

1 个答案: