viewport | 易学教程

iPad zoom to fit doesn't work on webpage with minimal content

阅读更多关于 iPad zoom to fit doesn't work on webpage with minimal content

问题 Consider the following rudimentary html code block: <!doctype html> <html> <head> <meta charset="utf-8"> <title>iPad test</title> <meta name="viewport" content="width=device-width"> <style> body { margin:0; } #content { margin: 0 auto; width: 980px; border:1px solid #c4c4c4; background-color:#f5f5f5; } </style> </head> <body> <div id="content"> A small amount of content </div> </body> </html> When viewed on an iPad, the main content area of 980px will not be auto zoomed to fit the iPad screen

Android 4.1 viewport scaling ( setInitialScale, meta initial-scale not working)

阅读更多关于 Android 4.1 viewport scaling ( setInitialScale, meta initial-scale not working)

问题 There are hundreds of posts across SO and the rest of the internet about trying to fix viewport scaling in Android, and I'm now fairly certain that you just cannot set the initial-scale in a webview on Android 4.1. I'm building a Cordova (Phonegap) app, and I've got every thing scaled nicely on the iPhone 3GS, 4S and 5 and an iPad 2, running iOS7 and the 3GS on iOS6 I've also got the UI scaled to fit on the Moto G, LG Nexus 5, Google Nexus 5 and Samsung Galaxy S4, all running Android 4.4 But

Responsive design and viewport not working through domain's “frameset.”

阅读更多关于 Responsive design and viewport not working through domain's “frameset.”

问题 I'm working on a responsive design site and ran into a fairly large snag. I used viewport code: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> and used: @media only screen and (min-width: 501px) and (max-width: 930px) { CSS HERE} as needed. When I put my index page on my host server to check it the site wouldn't respond to changes between my mobile devices. I tried my domain name site- didn't work. Turns out the domain name points to

dynamic add items to border viewport

阅读更多关于 dynamic add items to border viewport

I want to create a empty viewport(layout:border) first, then add items to it, finally render and show. but when I created the viewport element, it throw an error, says: Uncaught TypeError: Cannot read property 'flex' of undefined here are my code: <script type="text/javascript" src="ext-4.0.2a/bootstrap.js"></script> <script> Ext.require(['*']); Ext.onReady(function() { Ext.QuickTips.init(); var viewport = Ext.create('Ext.container.Viewport', { layout: 'border' }); var north = blablabla... viewport.add([north,south]); viewport.doLayout(); }); </script> According to notes that are taken from

glViewport different result in Android and iOS

阅读更多关于 glViewport different result in Android and iOS

I just got started on a renderer for my cross platform framework (iOS and Android) using opengl es. When I got to the viewport stuff (which is needed for splitscreen stuff) and noticed there is a difference between iOS and Android. Here are two images. Android There is actually another glitch. IT seems to wrap. iOS My question. Which of the two is correct? I have no transformations applied but one to bring the drawn quad back a bit. glTranslatef(0.0f, 0.0f, -5.f); Initialisation code: glEnable(GL_TEXTURE_2D); glShadeModel(GL_SMOOTH); //Enable Smooth Shading glClearColor(0.f, 0.f, 0.f, 1.0f); /

media query max-width relates to the view port size or the windows size?

阅读更多关于 media query max-width relates to the view port size or the windows size?

问题 I'm wondering if the max-width of a media query is relates to the view port size or the windows size? for example , I have this media query: @media screen and (max-width: 360px){} will this media query be in action when the view port size is 360px or the windows size 360px? 回答1: It's the viewport. This is stated in the spec: The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by

Position fixed 100% isn't viewport width when a bigger div is present on the page

阅读更多关于 Position fixed 100% isn't viewport width when a bigger div is present on the page

I have a scenario where I have a fixed page header, which should be 100% of the viewport width, and a bigger element that is around 5000px wide and scrolls underneath the header. There seems to be several problems with mobile browsers not fixing the header and instead displaying a bigger (ratio calculated??) header which scrolls slower on iOS, and suddenly jumps when past the width of the header in terms of scroll position on android. Using 100vw for the header works, but then sometimes the header disappears at a certain breakpoint, and doesn't seem to be truly fixed positioned. Essentially

Mobile Firefox ignores Viewport completely

阅读更多关于 Mobile Firefox ignores Viewport completely

问题 I'm lost and can't figure out how to convince Mobile-Firefox to load my site fully zoomed out :/ I couldn't find a working solution searching both stackoverflow and the web. Here's a link to the WEBSITE! There is no separate mobile-version of my website. I allow zooming in and out and on iPhones, iPads and the stock Android-Browser it works flawlessly. But using Mobile-Firefox on my Android it loads the page zoomed it... and that alone isn't the main problem! The "clickable" area of the page

How to get the height of a full html page in Phantomjs (javascript)?

阅读更多关于 How to get the height of a full html page in Phantomjs (javascript)?

Hi have tried all of these: document.body.scrollHeight document.body.offsetHeight document.documentElement.clientHeight document.documentElement.scrollHeight document.documentElement.offsetHeight These work in a normal browser but in Phantomjs I get the CMD (command-line window) height.. I want to get the height so that I can crop a screenshot later in the code.. and the height of the page must be as it is being viewed on a normal browser I'm getting 300 pixels and I want to get the full html page height (that varies dependent on the URL).. Those values provide the expected values as with

微信开发系列——微信订阅号前端开发利器：WeUI

阅读更多关于微信开发系列——微信订阅号前端开发利器：WeUI

阅读目录一、WeUI组件介绍二、组件基本用法 1、引用必须的文件 2、最基础的组件样式 3、其他基础组件效果示例三、自定义组件 1、简单的弹出层 2、图片全屏预览四、使用示例五、总结正文前言：年前的两个星期，学习了下微信公众号的开发。后端基本能够基于盛派的第三方sdk能搞定大部分事宜。剩下的就是前端了，关于手机端的浏览器的兼容性，一直是博主的一块心病，因为博主一直专注于bootstrap的相关组件学习，知道bootstrap做响应式没有任何问题，所以曾经尝试过直接用bootstrap来布局，对于一些简单的栅格布局，bootstrap没有任何问题，可是一旦涉及前端组件这一块的时候，总是找不到合适的移动端组件，什么都要自己去实现，这个开发成本就大了去了。于是乎博主打算另辟蹊径，找找基于微信开发的移动端UI组件，最后找到了微信官方开发的一套前端组件：WeUI。本文原创地址： http://www.cnblogs.com/landeanfen/p/8473755.html 回到顶部一、WeUI组件介绍 WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。有了这个作为基础，妈妈再也不用担心微信开发的浏览器兼容性问题了，微信官方推出的东西应该比较靠谱吧！ WeUI开源地址： https:/