相关疑难解决方法(0)

我正在建立专门针对移动设备的网站.特别是有一个页面,最好以横向模式查看.

有没有办法检测访问该页面的用户是否在纵向模式下查看它,如果是,则显示一条消息,通知用户该页面最好以横向模式查看？如果用户已在横向模式下查看,则不会显示任何消息.

所以基本上,我希望网站检测视口方向,如果方向是纵向,则显示警告消息,告知用户该页面在横向模式下最佳查看.

非常感谢,Dan

在JavaScript中,可以使用以下方法检测方向模式:

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

但是,有没有办法只使用CSS检测方向？

例如.就像是:

@media only screen and (width > height) { ... }

我正在开发一个平板电脑的网络应用程序(用于Android和ios),我正面临一个问题,这个问题已经给我带来了2天的麻烦.

问题是,当您处于纵向模式时,在Android上,例如您聚焦输入字段,以便软键盘弹出css媒体查询方向更改为横向.我已经读过这个问题:CSS媒体查询 - 软键盘打破了css定位规则 - 替代解决方案？并想出了这个:

var is_keyboard = false;    
var is_landscape = false;    
var initial_screen_size = window.innerHeight;

window.addEventListener("resize", function() {

is_keyboard = (window.innerHeight < initial_screen_size);
is_landscape = (screen.height < screen.width);

updateViews();
}, false);


function updateViews()
{
  if(!is_landscape)
  {
      if(is_keyboard)
      {       
        $("html").removeClass("landscape portrait");
        $("html").addClass("portrait");
      }
  }
}

然而,由于某种原因,这不起作用.无论如何都要将方向更改为纵向模式,以便css媒体查询认为我们处于纵向模式？我不喜欢使用max-width等因为我需要支持多种屏幕尺寸.

提前致谢.

我知道纯CSS可以根据屏幕尺寸调整样式表,如下所示:

@media (max-width: 959px) {
  /* styles for smallest viewport widths */
}

@media (min-width: 600px) and (max-width: 959px) {
  /* styles for mid-tier viewport widths */
}

@media (min-width: 960px) {
  /* original CSS styles */
}

^(来源)

是否可以使用纯CSS来检查横向或纵向显示？

我正在寻找有关CSS3功能的一些问题的答案 - Media Queries:

1. 对于不同分辨率声明css规则,哪种方式更好(对于浏览器由于性能)？

   //this in head:
   <link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
   
   //or this in css file:
   @media only screen and (max-width: 1024px){
       //styles here
   }
   

   Run Code Online (Sandbox Code Playgroud)

2. max-device-width和之间有什么区别max-width？是否只针对mobile(max-device-width)或desktop(max-width)浏览器解决了规则？

3. 如果我为具有分辨率的平板电脑编写媒体查询规则1280x800,用户也可以使用纵向/横向模式,它应该如何看？我应该为其编写规则max-width: 800px,max-width: 1280px还是有另一种方式？

4. 如果我写规则,我应该写这样的东西:

   <link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... />
   

   Run Code Online (Sandbox Code Playgroud)

   或者改为这两个:

   <link ... media="only screen and (max-device-width: 480px) ... />
   <link ... media="only screen and (max-device-width: 1024px) ... …

   Run Code Online (Sandbox Code Playgroud)