可以使用 width=device-width 和 meta name="viewport" content="width=1024" 吗？答案

【问题标题】：Possible to use width=device-width and meta name="viewport" content="width=1024"?可以使用 width=device-width 和 meta name="viewport" content="width=1024" 吗？
【发布时间】：2013-02-26 16:27:11
【问题描述】：

我可以在 wordpress 的标题 php 中添加两个视口：

<meta name="viewport" content="width=device-width" />

和

<meta name="viewport" content="width=1024" />

我希望能够说everything 显示使用viewport width 1024，除非您是x 像素以下的移动设备，然后改用width=device-width。

这可能吗？

谢谢

【问题讨论】：

wordpress.org/extend/plugins/php-browser-detection 如果它是移动浏览器，echo 是一个不错的元数据！

标签： php css wordpress media-queries

【解决方案1】：

使用良好的 plugin ，它将类似于：

<meta name="viewport" content="width=<?php echo  (is_mobile()) ? "device-width" : "width=1024" ?>" />

【讨论】：

谢谢乔，它有点工作，但我的风格在移动版本上到处都是，当你只使用设备宽度时它们工作？普通浏览器在 1024 处没问题。使用基于 212 的子主题，因此它首先运行移动设备。我有以下媒体查询：从所有移动样式开始，然后是 /* 最小宽度为 600 像素。 */ 媒体屏幕和 (min-width: 600px) 这会拾取 iPad，在线 ipad 生成器显示所有内容，但在实际 ipad 上仅查看页眉/页脚显示，因此为什么将其切换为宽度 = 1024，然后是最后一个媒体屏幕和 (最小宽度：960px)
对不起，我不明白问题是什么？你不会根据浏览器的宽度改变viewport属性的值吗？
在ipad上查看时页眉和页脚之间的内容消失了，但是在屏幕上的ipad模拟中查看它看起来不错，这意味着使用firebug查找问题并不好。因为如果使用 viewport content="width=1024" ipad 版本看起来不错，我想我可以使用它，但这也会影响手机版本，我想要一个允许手机使用初始 css 的解决方案（它的移动优先方法) 使用设备宽度，然后强制 ipad 和屏幕使用视口宽度 1024。这是否使它更清晰？抱歉，可能不太清楚，但我确实尝试过。
好的，你可以让is_ipad($version)测试ipad。（$version 是可选的，允许过滤给定版本）。转到plugin 网站查看所有可能性...

【解决方案2】：

你可以试试下面的代码

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
}

【讨论】：