viewport

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

由 依然范特西╮ 提交于 2019-12-04 05:46:17
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 the input so as to have liquid design:) Here is the example to recreate the issue. Thanks... <html> <head

流式布局和viewport

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-04 05:30:27
流式布局 百分比布局，非固定宽度，内容向两边填充，流动的布局。 viewport(视口) PC端的网页在手机端的浏览器显示是不会出现网页的，这是因为移动端的网页不是直接放在移动端的浏览器中，而是放在移动端的一个虚拟区域中，这个虚拟区域叫做viewport(视觉窗口,视口，视口的宽度一般默认比浏览器宽度大),然后视口进行相应的缩放，最后将视口放在浏览器中。 适配方案 因为viewport默认会进行缩放，所以网页在移动端显示的对用户不友好，所以我们需要进行一些配置来使网页在移动端显示得和pc端一样。 网页宽度必须和浏览器宽度保持一致 默认显示的缩放比例和pc端保持一致(缩放比例为1.0) 不允许用户缩放网页 <head> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> viewport主要有6个功能属性 width (特殊值: device-width,表示设备屏幕宽度) 设置宽度 height 设置高度 initial-scale(1:表示不进行缩放) 设置默认的初始化缩放比例 user-scalable 设置用户是否可以进行缩放 minmium-scale 设置最小缩放比例 maxmium-scale 设置最大缩放比例 来源： https:/

How can I change the height of an iframe for different screen sizes?

由 人盡茶涼 提交于 2019-12-04 05:19:57
问题 I have a form that is an iframe. The code is below with a # for what the iframe is. On desktop I need the frame to be 292px in height to match the design. On tablet it needs to have height="180" On mobile height="292" I have tried making the height 100% and changing the size of the holding the iframe but the iframe is too short and cuts off the bottom of the form Can I do adjust the height of an iframe for different viewports? <iframe src="#" width="100%" height="292" type="text/html"

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

由 强颜欢笑 提交于 2019-12-04 05:05:18
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? 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 CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any). This also applies to sub

Mobile Firefox ignores Viewport completely

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-04 03:26:38
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 remains the same small "box" of the initial-zoom: I can't slide my sliders, I can't even click on

移动端适配方案

由 徘徊边缘 提交于 2019-12-04 02:24:17
原文链接： http://caibaojian.com/mobile-responsive-example.html 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的 rem 布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： ·

Resize Images as viewport resizes without sides being cut off

由 橙三吉。 提交于 2019-12-03 21:59:05
I have a CSS problem. I have an image that is 1024x500 pixels. Now the problem is, whenever the browser window/viewport changes width below the width of the image(1024px), the image starts to get cut off. Now as you can see, I set the container width to 100% when the viewport size goes below 1024px, and it does resize proportionally, but the sides of my image get cut off more and more as the browser resizes(smaller). Could anyone help me get my image to resize dynamically pixel for pixel (without losing any of the original picture - no cut offs)? Check out my webpage and resize the browser

Media Queries min-width not firing correctly in Opera, FF and IE

由 泪湿孤枕 提交于 2019-12-03 21:27:43
问题 I use media queries on a page http://test.lovecpokladu.cz/detail-mince?id=2461 like this: @media all and (min-width: 660px) { ... styles for box decoration ... } and use this meta viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"/> When I resize Chrome's window to 660px (measuring just the HTML page, not window borders), styles apply correctly. Styles don't apply in 659px, which is correct. Problem is with Opera, IE and Firefox. The styles apply as soons as

viewportSize seems not to work with PhantomJS

由 牧云@^-^@ 提交于 2019-12-03 19:52:39
问题 Shouldn't the output from this PhantomJS script be 240x320 pixels? I'm getting a large, default-sized image. clipRect() would seem to render the correct size image, but I need the responsive content of the page to reflect the actual browser window size. var page = require('webpage').create(); page.viewportSize = { width: 240, height: 320 }; page.open('http://cnn.com', function (status) { if (status !== 'success') { console.log('Unable to load the address!'); } else { window.setTimeout

LIBGDX: What is a “viewport”?

由 自闭症网瘾萝莉.ら 提交于 2019-12-03 18:30:31
问题 This post is related to an earlier post of wanting to learn how to properly render in between LIBGDX and Box2D. I had to understand viewport well before I could proceed. After much code/post readings, I felt the meaning of "viewport" was "the rectangle opening of a lens of the camera that views LIBGDX's Game world, where I can move it about the world to view what I want". But, after more reading, I seemed to be nowhere near the actual meaning. I've read the LIBGDX wiki, and read in the OpenGL
订阅 viewport