Fatal编程技术网
  • css/
  • 即使没有应用CSS，Ipad也会在横向模式下切断文本

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

css ipad

即使没有应用CSS，Ipad也会在横向模式下切断文本,css,ipad,screen-orientation,Css,Ipad,Screen Orientation,我目前正试图弄清楚，为什么每当在iPad XCode模拟器上以横向方式查看我的布局时，右侧的布局会被切断。更奇怪的是：即使我从布局中删除了所有css，我仍然会遇到同样的问题。我猜这与我的视口设置或主布局文件中的其他内容有关： <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" con

我目前正试图弄清楚，为什么每当在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>
可在以下位置找到该应用程序的实时演示：

为了看到这个问题，你需要用开发工具去掉css。

这个问题的答案非常简单：iPad仿真器和Chrome设备仿真器都坏了，在横向模式下给你一个错误的布局。很抱歉浪费了大家的时间。

您是否尝试过在没有移动特定元标记的情况下测试它，以查看是否存在冲突？你有什么地方可以让我看的实时代码吗？我添加了一个实时链接。当我删除meta标签时，问题仍然存在，因为我在Windows上，所以我没有xcode，但我只是在我的iPad上打开了它，它呈现得很好，大部分情况下它是第一代iPad。您的肖像被拉伸到整个高度，您的标签略微重叠。但没有截取文本。希望这意味着你的模拟器有问题。是的，我在iPad4上也很好。我也这么想。实际设备测试是关键。祝你好运！