Tag: 视口

视口元标记真的有必要吗?

我已经创build了一些响应式网站,但对响应式网站开发来说却是一个新兴的事情 在我的CSS中,99%的值是以ems或百分比表示的。 我正在使用媒体查询(最大宽度和最大设备宽度)进行布局更改。 我没有包含视口元标记,它可以在iOS,我testing过的许多Android手机和平板电脑以及所有桌面浏览器上完美运行。 添加元标记会破坏我的网站。 我是否做错了什么,或者做了什么正确的事,这样我就不需要包括它了? 我很困惑,为什么这似乎是一个最好的做法,因为它打破了我的东西。 我错过了什么吗?

我怎样才能强制网站扩展到手机修复(Iphone android ..)

当我加载我的网站在一个iPhone它不缩小。 我所看到的是最左上angular的几百平方像素。 我是手机优化的新手,但是我觉得大多数页面会自动滚动以适应,而且大部分问题似乎都是针对我所面对的情况(强制手机不能缩小比例)。 我想整个页面的宽度是可见的,使用户将不得不放大阅读文本。 我曾尝试过,没有在头上的代码,但没有明显的影响。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!– I Also tried: –> <meta name="viewport" content="width=1024, initial-scale=1">

HTML5 Boilerplate:Meta viewport和width = device-width

我正在构build一个自适应/响应式网站。 关于HTML5BP的最近更改: “ 移动/ iOS的CSS修订 ” 我已经开始使用: <meta name="viewport" content="width=device-width"> …我有这个在我的CSS: html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 当包含initial-scale=1时,从垂直到水平(在iPad / iPhone上)旋转导致布局从2列(例如)改变到3列(由于美达查询, initial-scale=1和JS修复视口缩放错误 )。 总而言之 ,在横向模式下,缩放页面: <meta name="viewport" content="width=device-width"> …而这不是: <meta name="viewport" content="width=device-width, initial-scale=1"> 注意:在iPad / iPhone上查看HTML5BP网站时,您可以看到这种缩放效果。 我的问题: 这是否成为新的标准(即在横向模式下变焦)? 我有一段时间向我的同事和老板们解释这个变化……他们习惯于在水平模式下看到不同的布局; 现在页面放大和布局保持不变(除了更大)。 如何向无知的群众解释这个问题的任何提示(其中,我可能会被包括在内)? @robertc:谢谢! 这非常有帮助。 我其实不喜欢initial-scale=1 ; 这是我的同事谁习惯看到布局的变化,而不是放大。 我相信我会被迫添加initial-scale=1来取悦每个人(因为没有缩放,看到布局的变化,是他们以前看到的)。 我刚刚注意到github上的HTML5BP index.html和网站 ,使用<meta name="viewport" content="width=device-width"> ; 对我来说,这是足够好的原因,以消除initial-scale=1 ,但当我试图向“非极客”解释这些事情时,我感到很惊讶。 […]

缩放到适合的视口元属性有什么作用?

我很难find这个文件。 它是特定于Safari吗? 在iOS 9( 这里 )有一个最近的错误,解决scheme是添加shrink-to-fit=no的视口元。 这段代码是做什么的?

在iPad / iPhone上纵向和横向之间翻转时,响应式网站会放大

我在这里使用Twitter Bootstrap构build了一个响应式网站:http: //zarin.me/cce/ 响应式devise在iPad和iPhone上效果很好,但是当我将设备从纵向翻转到横向时,网站被放大而不是适应屏幕(捏住屏幕)。 我错过了什么? 这是一个视口问题吗? 这是我在我的唯一的视口代码: <meta content="width=device-width, initial-scale=1.0" name="viewport"> 提前致谢!

以跨浏览器的方式查找视口的确切高度和宽度(无Prototype / jQuery)

我试图find浏览器的视口的确切高度和宽度,但我怀疑Mozilla或IE给我错误的数字。 这是我的身高的方法: var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 我还没有开始宽度,但我猜这将是类似的东西。 有没有更正确的方式获取这些信息? 理想情况下,我希望该解决scheme也可以与Safari / Chrome /其他浏览器一起使用。

什么是在HTML中的视口。

什么是HTML中的视口? 你可以举一些如何访问视口细节的例子吗?

在移动网站上禁用缩放

我想在移动设备上禁用捏和缩放。 我应该把什么configuration添加到视口? 链接: http : //play.mink7.com/n/dawn/

从纵向到横向旋转时,iPad的布局会扩大

我有一个添加到"viewport"元标记"width=device-width,initial-scale=1.0"和在iPad的页面加载罚款横向模式,它很好地切换到肖像,当我把它旋转回风景它缩放页面,我不得不捏缩放到1规模。 我可以通过添加"maximum-scale=1.0, user-scalable=no"来解决这个问题,但是我想知道是否有一种方法可以解决这个问题,而不需要从用户那里放大页面的能力。 如果您有任何build议,我很乐意听到他们, 谢谢!

Overflow-x:hidden不会阻止移动浏览器中的内容溢出

我在这里有一个网站。 在桌面浏览器中查看,黑色菜单栏正确地只延伸到窗口的边缘,因为body具有overflow-x:hidden 。 在任何移动浏览器中,无论是Android还是iOS,黑色菜单栏都会显示其全宽,这会在页面的右侧留下空白。 据我所知,这个空格甚至不是html或body标签的一部分。 即使我在<head>中将视口设置为特定的宽度: <meta name="viewport" content="width=1100, initial-scale=1"> 该网站扩大到1100px,但仍然有超过1100的空白。 我错过了什么? 我如何保持视口1100,并切断溢出?