viewport

问题 I always get the wrong measurements of my webapp. It is 320x460 even though I'd expect it to be 320x548. I'm using following metatags: <meta name="viewport" content="initial-scale=1, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> So I'm not sure what I'm doing wrong. 回答1: This may help you - standard viewport tag to set the viewport to the device's width Android 2.3 devices need this so 100% width works properly and doesn't allow children to blow up the viewport

问题 My application generates HTML email templates. They are between 600px and 650px wide usually, but sometimes they go up to 900px. The templates are nested pretty deep (lots of table elements for email clients), and sadly all the widths/heights are hard-coded in px, not relative dimensions. This has been ok until now, because my users view them in a browser. But now I am building a mobile app. I am trying to display these templates in a webview inside various mobile clients (iPhone, Android,

问题 What I'd like to do, if it's technically possible, is leverage JavaScript (frameworks such as jQuery are totally fine, too), to determine what percentage of an inactive browser window might still be in view. For example, in the image below, imagine I'm working on a project for CNN.com. In this scenario, I know I can use window.onfocus and window.onblur to determine whether the window marked as Background window is in focus or not. [![enter image description here][1]][1] However, I'm

问题 I created a simple using only ems and percentages as css units. It is a container div wrapping some elements and it's center in the page with the following code: position: absolute; top: 50%; left: 50%; margin-top: -25.875em; margin-left: -38.187em; padding: 0; width: 76.375em; height: 47.75em; It works great in all browsers except for the iphone and ipad. It renders only the top right corner of my page. I added : <meta name="viewport" content="maximum-scale=2, minimum-scale=.2, initial-scale

问题 I'm trying to fill a certain part of the page with a background color. I want the background colour to fill the entire width of the viewport, but have a fixed height. Here's what I've tried: <div id="theDiv" style="width: 100%; height:200px; background-color:black;"> Blah blah blah, content goes here. </div> But no matter what I try, this always give me a small white margin at either side of the div, between the edge of the div and the boundaries of the viewport. How can I make the div fill

问题 I have not been able to get IE mobile to stop automatically resizing my site design. I am using three stylesheets with media queries to display the site differently on different device screens. I've included the meta tag so it shows the mobile stylesheet on IE mobile but it keeps setting the viewport at 320X480 instead of using the actual size of 480X800. How can I force it to display at the actual screen size instead of scaling for a smaller resolution? 回答1: IE Mobile interprets width=device

问题 I want to allow the user to zoom when he clicked on an image and I don't want to allow him to zoom if there is no image. // image function viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes'); // no image function viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no

问题 How does one go about creating a fully responsive site (ie. 'fluid') that doesn't end up displaying the narrow "mobile" version on a tablet? (Usually the mobile version of a website is designed with thumbs in mind. It's very basic, usually single column, and isn't really suited to larger mobile devices like tablets.) Even if you've designed everything to scale gracefully to every width, you still need the viewport setting to tell a user's phone to display the content at the right width... but

问题 I am using the OpenTk GameWindow. I have been adding graphics settings to my project. But I cannot figure out how to correctly change the resolution or go in or out of fullscreen mode in runtime. Can someone please explain the correct procedure to changing the resolution and/or fullscreen state in while the game is running. Using WindowState = WindowState.Fullscreen; and WindowState = WindowState.Fullscreen; work, but they modify the viewing area and setting GL.Viewport doesn't fix it. I am

问题 I want an absolutely-positioned element to be just out of the browser window - just off the top of the browser viewport. Note that I cannot provide an exact height of the specified element. Can this be done? If not, using jQuery is fine too. 回答1: CSS: #theElement { position: fixed; bottom: 100%; } jQuery: var $el = $('#theElement'); $el.css({ position: 'fixed', top: '-' + $el.outerHeight() }); 回答2: If your element is at body level this should work: #element { position: absolute; top: -100%; }