我正在尝试为iPad/iPhone和旧款iPhone实现替代布局.
我已经确定最好的方法是使用@mediaCSS3规范.
因此,这些是我的媒体查询:
@media screen and (max-width: 1000px) { ... }
以上是小型台式机和笔记本电脑屏幕.
@media screen and (max-width: 700px) { ... }
以上是适用于iPad和非常小的台式机/笔记本电脑屏幕.
@media screen and (max-device-width: 480px) { ... }
以上是iPhone 3GS和移动设备.
然而,新的iPhone 4与史蒂夫乔布斯的所有歌唱全舞"视网膜"显示意味着它的像素比率为2-1意味着1像素实际上出现在浏览器2x2像素使其分辨率(960x640 - 意味着它将触发iPad布局而不是移动设备布局)因此这需要另外的媒体查询(仅限webkit支持):
@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }
现在,问题是......我希望我的闪亮的新iPhone 4布局与iPhone 3GS和移动设备布局合并,因为它们都具有完全相同的内部CSS代码,
因此提出我的问题;
如何创建@media将iPhone 4,3GS和其他手机指向相同样式的规则？
我正在努力优化响应式网站,Safari(桌面和移动设备)似乎完全忽略了某个点以下的媒体查询.我有以下代码:
@media screen and (max-width: 767px){
/* Safari responds to css here */
}
@media screen and (max-width: 640px){
/* css here is ignored by Safari */
}
Firefox和Chrome都做出了适当的响应.有没有人对正在发生的事情有任何想法？
你可以在这里看到这个网站:http://kgillingham.webfactional.com.应该发生什么(并且适用于FF和Chrome)是因为站点变得小于640px,滑块中的标题字体应该变得更小.
编辑:该网站现已更新为使用javascript在大小小于640px时添加类.该类始终使用较小的字体大小.这意味着它现在按预期工作,但我宁愿使用CSS媒体查询而不是javascript,所以我仍然希望看到一个解决方案.
我见过许多网站在桌面浏览器和手机浏览器上都有响应,我正在网站上工作,我有以下样式表设置:(希克斯设计网站是我想要实现的一个很好的例子,如果你需要一个)
/* Normal styles go here */
@media screen and (min-device-width:321px)
{
/* Styles */
}
@media screen and (min-width:701px)
{
/* Styles */
}
@media screen and (min-width:1025px)
{
/* Styles */
}
@media screen and (min-width:2049px)
{
/* Styles */
}
但是我上面的样式表似乎只适用于桌面浏览器.(使用Android Firefox和Sony Xperia Ray上的默认Android浏览器进行测试)
希克斯设计网站的规则与我的非常相似,但它们使用了min和max,但对我来说似乎并不适用于移动和桌面浏览器.(我计划更多地优化我的媒体查询,我只是试图让基本功能正常运行,因为我现在想要它们).
如果我使用max-device-width而不是max-width,它会在移动浏览器上响应,而不是桌面浏览器......
我尝试了以下以解决此问题:
@media screen and (max-width:480px), screen and (max-device-width:480px)
{
/* Styles */
}
也:
@media screen and (max-width:480px), and (max-device-width:480px)
{
/* Styles */
}
但是我不认为其中任何一个都是正确的,因为Firefox的Web开发人员工具栏会抱怨它.我还尝试了上述规则的一些变化,但仍然无法使其工作.
据我所知,max-width读取视口宽度(比如..浏览器窗口的宽度),max-device-width读取用于查看站点的屏幕的实际宽度. - 我很困惑为什么max-width似乎没有读取移动设备的浏览器宽度.
我想我可能在这里遗漏了一些关于媒体查询的明显内容......如果我希望我的网站能够在桌面和移动浏览器上做出响应,我似乎没有意义,我必须复制所有媒体查询并改变它从'screen and(max-width)'到'screen …