移动端web 有没有属性禁止横屏

Question

第一个问题，手机上的web，跟pad上的，用同一套设计稿好么？

pad设备宽度大于手机上的，如果用同一套在手机上会不会有点不合适，
而且pad上横屏跟手机竖屏 布局上也不太一样。

一般都用一套设计稿，还是手机和pad各一套。

第二个问题，pad上的设计稿尺寸多少合适，跟apple一样，需要乘以2么？

第三个问题，有没有什么办法来禁止横屏显示，也就是说横屏的时候还是竖屏显示。

求大神详解，谢谢.

Answer 1

1,设计一套就好
2.
3.目前还不能强制设备横屏（已经有了相应的api 但是还不通用）,你可以检测他们的方向然后做相应的提示，比如你想用户一直竖屏，一旦他们横屏的时候 你就提示 说 竖屏体验更加，还蛮多应用这么做的

Answer 2

腳本/media query 檢測，如果是橫屏則告訴用戶必須豎屏才能繼續（我見過這樣做的）。

或者

若橫屏直接 根元素上 transform: rotate(90deg);

@media (max-device-width : 1024px) and (orientation : landscape) {
    html { transform: rotate(90deg); }
}

經測試，法二不靠譜

Answer 3

MDN:Screen.orientation

文章：HTML5: Screen Orientation API Uses Javascript to Rotate the Screen(ps：文章我正在翻译)