我的iPhone认为它的980px宽 [英] My iPhone thinks it's 980px wide

问题描述

我想创建一组三个非常简单的媒体查询，以处理一系列屏幕尺寸。这里是我想出了，在一连串的headscratching后：

  @media all和（min-width：0px） max-width：480px）{styles here} 
 @media all和（min-width：481px）和（max-width：1023px） 1024px）{styles here} 
  

这是我在浏览器中的预期，它，它坚持显示中等大小的syles。使用数字，我发现只有最大宽度为980像素的iPhone会响应该查询中的样式。

注意我对这些查询使用all，排除与手持或屏幕，手持等代码是否有关。尝试简化以帮助我理解问题。

我认为这可能与我正在开发的页面的内容有关，所以我创建了一个无内容的测试页来试图找出问题。位置：

http://rgdaniel.com/test-mediaquery。 php

如果我使用桌面浏览器查看该页面，当我调整窗口大小的时候，它的行为是正常的。但是iPhone在980px以下的任何指定的最大宽度报告我的中等res消息。 c

>< meta name =viewportcontent =width = device-width，initial-scale = 1.0>

您也可以执行此操作，

code>< meta name =viewportcontent =width = device-width，initial-scale = 1.0，user-scalable = 0>

此部分 user-scalable = 0; 可防止用户用手指缩放，如果您有位置：固定元素。

I'm trying to create a set of three very simple media query's to handle a range of screen sizes. Here's what I came up with, after a bunch of headscratching:

@media all and (min-width: 0px) and (max-width: 480px)  { styles here }  
@media all and (min-width: 481px) and (max-width: 1023px)   {  styles here } 
@media all and (min-width: 1024px) {  styles here } 

This works as I expected in browsers, but when I point my iphone at it, it insists on displaying the syles for the medium size. Playing with the numbers, I found that only with a max-width of 980px does the iphone respond to the styles within that query.

Note that I used "all" on these queries to rule out anything to do with whether or not to code "handheld" or "screen, handheld" etc. Trying to simplify to help me understand the problem.

I thought it might have had something to do with the contents of the page I was developing, so I created a no-content test page to try to pin down the problem. It's at:

http://rgdaniel.com/test-mediaquery.php

If I look at that page with my desktop browsers, it behaves as expected when I resize the window larger and smaller. But the iPhone reports my "medium res" message at any specified max-width under 980px. Any help appreciated, thanks in advance.

解决方案

When using media queries you need to add this to your head tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This allows the website to detect that it is being used on a device.

You can also do this,

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

This part, user-scalable=0; prevents the user from zooming with their fingers and is useful if you have position: fixed elements.

这篇关于我的iPhone认为它的980px宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！