viewport

Mobile Website: Orientation change from portrait to horizontal

由 百般思念 提交于 2019-12-21 23:50:36
问题 I'm developing a mobile website for iPhone and Android browsers. As I was playing around with an Iphone 4 and a HTC Desire I found out that the two devices react differently on orientation change. If I load the website in portrait mode and then rotate the device to horizontal mode, the Iphone zooms closer to the content using the same width (320px). With an Android device, if I rotate it seems that the viewport changes, so there isn't any zooming going on (width >320px), instead the websites

Scaling div width depending on height

由 陌路散爱 提交于 2019-12-21 18:28:48
问题 I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed. I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 ( resize browser height ) <body> <div></div> </body> html, body { height: 100%; width: 100%; margin: 0; } div { height: 100%; width: 130vh; margin: 0 auto; background: #f0f; } However, I worry about fallback for IE8 and Safari, as it this unit is not supported there. Are there

Placeholder attribute on text input with iOS 6 from landscape to portrait

由 南笙酒味 提交于 2019-12-21 11:29:49
问题 I have a problem after updating to iOS 6 that is driving me nuts. It looks like any time I have the attribute "placeholder" on an input field, while rotating from Portrait to Landscape and back to Portrait again the page shifts some pixels on the left side causing a horizontal bar. I concluded after long research that it has to be something related to the meta viewport because every time I use the content="width=device-width" all works fine. P.S Yes I really need to have a percent width on

移动webAPP前端开发技巧汇总

由 两盒软妹~` 提交于 2019-12-21 11:28:29
1. viewport：webapp视图 也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域， 这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个： width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素） height - // viewport 的高度 （范围从223 到10,000） initial-scale - // 初始的缩放比例 （范围从>0 到10） minimum-scale - // 允许用户缩放到的最小比例 maximum-scale - // 允许用户缩放到的最大比例 user-scalable - // 用户是否可以手动缩 (no,yes) 那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如： <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> //编码 <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user

webkit开发，app移动前端知识点

由 感情迁移 提交于 2019-12-21 11:28:13
如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ： 1. viewport： 也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域， 这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个： width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素） height - // viewport 的高度 （范围从223 到10,000） initial-scale - // 初始的缩放比例 （范围从>0 到10） minimum-scale - // 允许用户缩放到的最小比例 maximum-scale - // 允许用户缩放到的最大比例 user-scalable - // 用户是否可以手动缩 (no,yes) 那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如： <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> //编码 <meta

webkit开发，app移动前端知识点

由 空扰寡人 提交于 2019-12-21 11:27:56
1. viewport： 也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域， 这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web ,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个： width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素） height - // viewport 的高度 （范围从223 到10,000） initial-scale - // 初始的缩放比例 （范围从>0 到10） minimum-scale - // 允许用户缩放到的最小比例 maximum-scale - // 允许用户缩放到的最大比例 user-scalable - // 用户是否可以手动缩 (no,yes) 那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如： <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> //编码 <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable

webkit webApp 开发技术要点总结

由 。_饼干妹妹 提交于 2019-12-21 11:27:41
如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ： 1. viewport： 也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域， 这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个： width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素） height - // viewport 的高度 （范围从223 到10,000） initial-scale - // 初始的缩放比例 （范围从>0 到10） minimum-scale - // 允许用户缩放到的最小比例 maximum-scale - // 允许用户缩放到的最大比例 user-scalable - // 用户是否可以手动缩 (no,yes) 那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如： <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> //编码 <meta

webkit webApp 开发技术要点总结

由 爷，独闯天下 提交于 2019-12-21 11:27:22
如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ： 1. viewport： 也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域， 这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个： width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素） height - // viewport 的高度 （范围从223 到10,000） initial-scale - // 初始的缩放比例 （范围从>0 到10） minimum-scale - // 允许用户缩放到的最小比例 maximum-scale - // 允许用户缩放到的最大比例 user-scalable - // 用户是否可以手动缩 (no,yes) 那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如： <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> //编码 <meta

Find screen position of a QGraphicsItem

由 感情迁移 提交于 2019-12-21 03:45:12
问题 Use case: This should be a fairly common problem. In a normal QMainWindow with QMdiArea lives an mdiChild with a QGraphicsView. This view displays a QGraphicsScene with QGraphicsItems inside. A right-click at one of these items selects (focusses) the item and opens a context menu, which is conveniently placed at the screen coordinates QGraphicsSceneMouseEvent::screenPos() . This is working as expected. Now I'd like to show the same context menu when the user presses a key (e.g. Qt::Key_Menu).

How use JQuery/Javascript to scroll down a page when the cursor at the top or bottom edge of the screen?

由 。_饼干妹妹 提交于 2019-12-21 03:37:04
问题 Simple, I just would like to have it so when a user is dragging an item and they reach the very bottom or top of the viewport (10px or so) , the page (about 3000px long) gently scrolls down or up, until they move their cursor (and thus the item being dragged) out of the region . An item is an li tag which uses jquery to make the list items draggable. To be specific: ../jquery-ui-1.8.14.custom.min.js http://code.jquery.com/jquery-1.6.2.min.js I currently use window.scrollBy(x=0,y=3) to scroll
订阅 viewport