如何使用 jquery 停止移动屏幕旋转？

Posted 2023-05-09

【中文标题】如何使用 jquery 停止移动屏幕旋转？

【英文标题】：How to stop mobile screen rotaion using jquery?

【发布时间】：2015-06-12 05:35:03

【问题描述】：

我正在尝试使用 jQuery 创建一个 html 页面，并在移动设备中关闭旋转。它对我不起作用。

您能否给我任何建议，当我在移动设备中运行此 html 页面时，它不应该旋转？

我使用了以下代码：

$(window).bind('orientationchange resize', function(event)
   if (event.orientation) 
  if (event.orientation == 'landscape') 
    if (window.orientation == 90) 
   rotate(this, -90);
     else 
   rotate(this, 90);
    
  
   
 );

 function rotate(el, degs) 
   iedegs = degs/90;
   if (iedegs < 0) iedegs += 4;
   transform = 'rotate('+degs+'deg)';
   iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')';
   styles = 
  transform: transform,
  '-webkit-transform': transform,
  '-moz-transform': transform,
  '-o-transform': transform,
  filter: iefilter,
  '-ms-filter': iefilter
   ;

   $(window).css(styles);
 ;

【问题讨论】：

其实我正在创建一个必须纵向显示的页面

当用户使用自然比高宽的设备查看它时，您期望会发生什么？平板电脑、手机横放等？

***.com/a/10977420/3164682

它看起来不太好。我只想要它的肖像。当用户尝试将它移动到横向位置时，它不应该被移动

据我所知，它不是那样工作的。！由于技术限制，javascript/Jquery 无法控制设备方向。如果它是一个应用程序，那么它是可能的。！但是您可以尝试在用户更改移动设备的方向时发出警报消息。例如，查看这家银行的移动网站。 m.axisbank.com

【参考方案1】：

this答案的后半部分有一个使用json设置（mainfest）文件的技巧。

小故事：创建一个mainfest.json 文件：

 
     "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
     "orientation":  "landscape", /* Could be "landscape" or "portrait" */
     ...
 

然后添加到您的 HTML 页面：

 <link rel="manifest" href="manifest.json">