小编Ada*_*rin的帖子

在方向更改后更改视口宽度后如何适应屏幕？

我需要页面的视口宽度为横向950px和纵向630px.遗憾的是,这些像素宽度不灵活.

我正在使用CSS媒体查询根据方向调整DOM内容的宽度.

我正在侦听JS中的方向更改事件,以便在方向更改时调整视口大小.

初始页面加载(纵向或横向)上的一切看起来都很好.

但是,在方向更改后,Mobile Safari会保留先前的比例设置,而不是将视口拟合到屏幕.双击或两次拉直.但我需要自动化.

我已经附上了下面的源代码,并将其上传到了一个演示URL.

以下是方向更改后拍摄的屏幕截图:从横向到纵向,从纵向到横向.

如何强制Safari自动将视口宽度设置为屏幕宽度？或者我这样做是错的？

更改视口中的各种比例设置没有帮助.设置maximum-scale=1.0或initial-scale=1.0似乎覆盖我的width设置width为device-width(即iPad 2上的1024或768),留下死边距.设置minimum-scale=1.0似乎什么都不做.

从风景到肖像

从肖像到风景

<!DOCTYPE html>
<html>
    <head>
      <title>iPad orientation</title>

      <meta name="viewport" content="user-scalable=yes">

      <script src="jquery-1.4.2.min.js" type="text/javascript"></script>

      <script type="text/javascript" charset="utf-8">;
        /**
        * update viewport width on orientation change
        */
        function adapt_to_orientation() {
          // determine new screen_width
          var screen_width;
          if (window.orientation == 0 || window.orientation == 180) {
            // portrait
            screen_width = 630;
          } else if (window.orientation == 90 || window.orientation …

Run Code Online (Sandbox Code Playgroud)

javascript mobile android tablet ios

Ada*_*rin

2015 06-02

19
推荐指数

2
解决办法

5万
查看次数