本文介绍了我的iPhone认为它的980px宽的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

  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宽的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 03:38
查看更多