viewport

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> width ：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素） height ：和 width 相对应，指定高度 initial-scale ：初始缩放比例，也即是当页面第一次 load

I'm trying to use a JavascriptExecutor to open a new tab in IE9 from selenium webdriver: public void openTab() { String url = webDriver.getCurrentUrl(); String script = "var a=document.createElement('a');a.target='_blank';a.href='" + url + "';a.innerHTML='open';document.body.appendChild(a);return a"; Object element = getJSExecutor().executeScript(script); if (element instanceof WebElement) { WebElement anchor = (WebElement) element; anchor.click(); } else { throw new RuntimeException("Unable to open tab: " + url); } } This works fine in Chrome but on running in IE9, I get the following error:

I'm currently working on the web app which use medium-dpi in viewport meta tag like the below. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, user-scalable=no, target-densitydpi=medium-dpi" /> When I test it on a galaxy S3 device, viewport seems not work correctly. I saw this kind of thing in Android 4.0.2. In android 4.0.2, i heard android OS itself has bug that can't apply the viewport correctly. Anybody has any idea?? I actually found an important clue. http://developer.android.com/guide/webapps/targeting.html " values less than

移动开发不同与PC端开发，可能会经历各种意想不到的问题，尤其是移动端应用刚起步的几年；随着移动互联网的快速发展，有些问题已经得到了很好的支持，如1像素边界的问题。当然，要更好地解决这些移动端的问题，就需有移动端领域相关的知识，下面就来说说。 dpr设备像素比 首先说一下，这个dpr不仅仅是移动端才有的，pc端也有，但是对一些移动端的问题产生的原因及解决显得比较重要，比如1像素的问题。先来看几个概念： 物理像素（physical pixel） 一个物理像素就是显示设备上最小的物理显示单元，每个物理像素都有自己的颜色值和亮度值。例如iphone6手机屏幕有750*1334个物理像素 设备独立像素（density-independent 设备独立像素又叫密度无关像素，也可以叫逻辑像素，程序使用的虚拟像素如css像素，可以理解为显示设备坐标系统中的一个点； 设备像素比dpr（device pixel ratio) 设备像素比，简称dpr，定义了物理像素与设备独立像素之间的对应关系，具体的对应关系是一个计算公式如下： dpr = 物理像素 / 设备独立像素 上面计算的dpr是指某一个方向上如x或者y方向，二者dpr值相同；程序中获取dpr方式如下： js获取dpr使用 window.devicePixelRatio css获取dpr使用 -webkit-device-pixel-radio

I recoded my site for responsive design and set the HTML viewport, javascript, and CSS for the outer container div as shown below. On mobile browsers (Opera and Firefox) I have the following problem: In portrait mode (only) the page loads correctly but the window allows scrolling to the right where there is a column of blank space outside the page-container. I can pinch zoom out so that I can see the column of space. Setting minimum-scale=1 only prevents the pinch zoom out, but you can still scroll to the right. Setting overflow-x prevents scrolling to the right but this seems dangerous (If

1.viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。 在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。 在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站。 移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。 浏览器的默认viewport的宽度。 2.移动设备哪些因素会引起css中px的变化？ 在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。 1）从iphone4开始，苹果公司便推出了所谓的Retina屏

不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。 我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。but，我们要对于市面上的手机各式各样的分辨率进行适配，刚接触移动端开发的时候是不是有点猝不及防哈哈，尤其是去年年中以前老版本的微信内置浏览器用的X5内核，给网友们戏称移动端IE... 今天的主题是讲的是我对移动端多终端适配的解决方案和移动端适配的有关布局的知识总结，下面正式开始。 基本概念和原理 首先要了解的重要的基础知识点：物理像素，设备独立像素，设备像素比，css像素，布局视口，可视视口,理想视口以及css单位rem。 物理像素（设备像素） 屏幕的物理像素，又被称为设备像素。任何设备屏幕的物理像素出厂时就确定了，是固定不变的。 设备独立像素 设备独立像素也可以理解为CSS像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。 设备像素比 设备像素比简称为dpr