用于智能手机和桌子的 CSS 案例答案

【问题标题】：CSS cases for smartphones and tables用于智能手机和桌子的 CSS 案例
【发布时间】：2013-12-28 03:00:48
【问题描述】：

尊敬的 stackoverflow 社区，

在过去创建响应式设计时，很容易使用 @media 的 min-width 和 max-width 来定义设计比例。现在我们有了大屏幕旋转的智能手机和平板电脑，例如 1080p (1920 x 1080像素）在大多数最近的基于 Android 的智能手机和平板电脑上。 iOS 在 +720p 屏幕分辨率上很受欢迎。

事实上，现在大多数桌面分辨率都可以与智能手机和平板电脑媲美，我找不到一种简单的方法来区分 css 中的大小写。

您是否知道在不使用 CMS 或过多的预构建模板的情况下实现这一点的好指南？

非常感谢！

【问题讨论】：

我只是好奇，你为什么要区分这些设备？
因为我希望在 PC 浏览器上的页面宽度为 70%，在所有移动设备上为 100% 全宽。
Media Queries for Standard Devices.
谢谢，但我已经知道该页面，但它没有帮助。如何在 PC 上使用 70% 的页面宽度，而在智能手机、平板电脑、电视等 1080p 设备（1920 x 1080 或 1080 x 1920 像素）上使用 100%？
即使使用 DPI 量作为解决方法也不起作用。 @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { #outerWrap { width: 100%; } }

标签： jquery html iphone css web-applications

【解决方案1】：

如果您有或没有触摸设备，此 javascript 代码会向 body 元素添加一个类。这对我帮助很大，让我很容易区分移动设备和桌面设备。

<script type="text/javascript"> 
    //detect if browser supports touch
    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device){
        $('body').addClass('touchDevice');
    }else{
        $('body').addClass('notTouch');
    };
</script>

【讨论】：