viewport

I have a mobile page that is 590px wide. So I set the viewport like this: <meta name = "viewport" content = "width = 590"> When I first visit the page either in portrait or landscape - it looks fine. The page fills the width exactly. But when I change orientation the viewport doesn't change. When I go from portrait to landscape the viewport is wider than the 590px, and vice versa. Tested only on Galaxy S2 Pete.K This sounds exactly like the problem I was having. I couldn't find a consolidated answer so had to piece one together. First, any CSS that appeared different on portrait and horizontal

I'm trying to use media queries to change the width of an element in chunks based on the width of the window (this allows me to increase the number of columns on the page without the width of the columns changing). I'd like to be able to do this using em's instead of pixels so that everything will look right if you change your font size. However, if I use the following: html { font-size: 12px; /* you could also use 75% if you want to be percent based.*/ } @media screen and (min-width: 42em) { div#page { width: 42em; } } The media query will trigger when the minimum width of the window reaches

㈠定义及用法 ⑴<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 ⑵<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 ⑶元数据（metadata）是关于数据的信息。元数据总是以名称/值的形式被成对传递的。 ⑷典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 ⑸元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 ㈡可选属性 注意： 当有http-equiv或者name属性时，必须要有content属性，content 属性提供了名称/值对中的值，content属性定义与 http-equiv 或 name 属性相关的元信息。content始终要和 name 属性或 http-equiv 属性一起使用。 ㈢name属性 ⑴定义元数据的名称，与content属性包含的值相关联。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。 ⑵application-name：定义正运行在该网页上的网络应用名称 •简单的网页不应该去定义 ⑶author：文档的作者名称 ⑷description

On mobile devices such as the iPad, I would like to disable a feature that only works if position:fixed is supported. Is there a way to detect these devices without using the user agent string? The reason is that I would like to avoid searching for iPad, iPhone, iPod, Android, etc if possible. Run the following function to test for position:fixed support. function () { var isSupported = null; if (document.createElement) { var el = document.createElement("div"); if (el && el.style) { el.style.position = "fixed"; el.style.top = "10px"; var root = document.body; if (root && root.appendChild &&

iOS解决方法 在Cordova（phonegap）的config.xml中增加一行配置： <preference name="EnableViewportScale" value="true"/> 实际上这行只是针对 iOS 项目的。 一般是好用的，但是某些版本的 Cordova（phonegap）会出现 bug，Android 设备出现问题。 建议在 Cordova 创建工程的目录下的 config.xml 文件也加上，方便以后用命令编译。 android 解决方法 MainActivity.java 类 package com.easycloud.waiter; import android.os.Bundle; import android.webkit.WebView; import org.apache.cordova.*; public class MainActivity extends CordovaActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Set by <content src="index.html" /> in config.xml loadUrl(launchUrl); /

I have a web-page that has the "user-scalable" attribute of the viewport meta tag set to true ( Safari reference , Android reference ). So users with browsers that recognize the attribute (such as Mobile Safari, Android Browser) can pinch to scale the page. However, there is a link that refreshes most of the page using AJAX, but does not perform a full page refresh. I'd like to reset the viewport scaling to the initial value using JavaScript. But I can't figure out how to do this. The only solution seems to be a full page refresh. Anyone know of a better way? Thanks. Pretty simple deal to set