Angular/React - 如何在 iPhone 的横向模式下实现 100% 的宽度？答案

【问题标题】：Angular/React - How can I achieve 100% width on an iPhone in landscape mode?Angular/React - 如何在 iPhone 的横向模式下实现 100% 的宽度？
【发布时间】：2021-01-28 04:18:43
【问题描述】：

我正在我的 iPhone 上测试我的网站，并注意到在横向视图中 Safari 在应用程序的任一侧都增加了一个重大差距。有谁知道如何解决这一问题？它发生在 Angular 和 React 应用程序中。您可以在下面的屏幕截图中看到两者的示例。

我已尽我所能对此进行了测试，但没有取得任何成功。要为自己重新创建此问题，请生成一个新的 react 或 angular 应用程序并以横向模式将其加载到 iPhone 上。屏幕截图来自模拟器，但也发生在设备上。

编辑：源代码是分别由 Angular 和 React 生成的样板。这是 React 源代码的副本：

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

索引.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: REDACTED
reportWebVitals();

【问题讨论】：

标签： html css reactjs angular material-ui

【解决方案1】：

您能否提供一些代码来准确描述正在发生的问题？

也许你可以尝试媒体查询并定义orientation => landscape

 @media only screen and (min-device-width: 480px) 
                    and (max-device-width: 640px) 
                    and (orientation: landscape) {
                         //enter code here...
                    }

您可以检查外包装中是否有no Margin and Padding 或Margin : auto

希望对你有帮助。万事如意！！！

【讨论】：

感谢您的反馈！我添加了如上图所示的样板反应模板的源代码。我认为这与苹果的安全区域有关。

【解决方案2】：

尝试：在index.css:

html{
  margin:0,
  padding:0
}

body{
  margin:0,
  padding:0
}

【讨论】：

【解决方案3】：

我找到了解决办法！将viewport-fit=cover 添加到 html 标头中的元标记就可以了。感谢所有回答的人，你们都很棒！

  <meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover" >

【讨论】：