相关疑难解决方法(0)

如何在所有现代浏览器中检测页面缩放级别?

  1. 如何在所有现代浏览器中检测页面缩放级别?虽然这个线程告诉我如何在IE7和IE8中做到这一点,但我找不到一个好的跨浏览器解决方案.

  2. Firefox存储页面缩放级别以供将来访问.在第一页加载时,我能够获得缩放级别吗?我读到它的某个地方在页面加载发生缩放变化时有效.

  3. 有没有办法陷阱'zoom'事件?

我需要这个,因为我的一些计算是基于像素的,并且在缩放时它们可能会波动.


由@tfl给出的修改样本

此页面在缩放时提醒不同的高度值.[的jsfiddle]

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
    </head>
    <body>
        <div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie …
Run Code Online (Sandbox Code Playgroud)

javascript browser zoom detection

296
推荐指数
9
解决办法
25万
查看次数

为什么Android边框上的CSS边框看起来有所不同?

我有一个带边框的盒子.

border: 1px solid #000;
Run Code Online (Sandbox Code Playgroud)

我正在使用以下视口设置:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
Run Code Online (Sandbox Code Playgroud)

边框似乎是顶部和右侧的2个像素.这是什么原因?

http://i.imgur.com/7yHjy.png


附加:除了宽度和高度之外,没有其他CSS规则.

html css mobile android

13
推荐指数
1
解决办法
1477
查看次数

实际移动分辨率

我是HTML5和CSS3的新手,所以我正在开发一个简单的项目来更好地学习它.我最近发现了响应式设计,因此我创建了一个可扩展到手机的页面.我使用媒体查询,我创建了两个状态,一个用于屏幕640px(移动)和更小,一个用于屏幕641px和更大(桌面).该网站工作正常,当我缩放窗口并在我的手机上查看时显示正确的样式时,在我的桌面上显示正确的样式.

然而,在运行该网站后,我决定检查我的HTC One的分辨率 - 它是1080p.我的手机显示640px网站,无论方向如何.我想知道为什么会这样; 手机的更高分辨率不应该触发移动状态,但确实如此.我想我可能会对分辨率如何实际工作感到困惑.

那么,我如何确定手机(和平板电脑)的真实分辨率,以便我可以为它们创建适当缩放的网站?

//Mobile
@media screen and (max-width: 640px) {
    ...
}

//Desktop
@media screen and (min-width: 641px) {
    ...
}
Run Code Online (Sandbox Code Playgroud)

编辑 感谢下面的JoshCs评论,我意识到我在教程中使用了视口元标记.我想修改我的问题:viewport标签如何确定为任何给定设备显示的分辨率(如何根据设备的尺寸确定视口分辨率)?

<meta name="viewport" content="width=device-width; initial-scale=1.0"> 
Run Code Online (Sandbox Code Playgroud)

html css mobile html5 css3

6
推荐指数
1
解决办法
4397
查看次数

标签 统计

css ×2

html ×2

mobile ×2

android ×1

browser ×1

css3 ×1

detection ×1

html5 ×1

javascript ×1

zoom ×1