viewport | 易学教程

CSS3 使用 calc() 计算高度 vh px

阅读更多关于 CSS3 使用 calc() 计算高度 vh px

Viewport v iewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则，但是也提供更智能的功能：使用“+”、“-”、“*” 和 “/”四则运算；可以使用百分比、px、em、rem等单位；可以混合使用各种单位进行计算；表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。例如：设置div元素的高度为当前窗口高度-100px div{ height: calc(100vh - 100px); } 来源： https://www.cnblogs.com/zouhong/p/12016138.html

Change to basicDay view in FullCalendar if viewport is 480px or less?

阅读更多关于 Change to basicDay view in FullCalendar if viewport is 480px or less?

问题 Is there an easy way to change the view for a user based on the current viewport size in FullCalendar? What I'd like to do is have month view on desktop, and day view if using an iPhone or mobile device. At the moment with month view all the events are squashed up on mobile. Current code: $(document).ready(function() { $("#primary #calendar").fullCalendar({ header: { left: 'prev,next', center: 'title', right: 'month,agendaWeek,agendaDay' }, timeFormat: 'h(:mm)tt', eventSources: [ { url: 'http

'Media-queries' for javascript - different code for different viewport height/widths

阅读更多关于 'Media-queries' for javascript - different code for different viewport height/widths

问题 The problem I'm using javascript to calculate widths of elements to achieve the layout I'm after. The problem is, I don't want to load the code on smaller screen sizes (when the screen width is less than 480px for example) . I'd like this to work on load and on browser/viewport resize. I'd consider small screen devices 'the default' and working up from there. So, none of the following script is called by default, then if the browser width is greater than 480px (for example), the following

常见的移动端Web页面问题解决方案

阅读更多关于常见的移动端Web页面问题解决方案

安卓浏览器看背景图片，有些设备会模糊用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样 devicePixelRatio＝2 ,现在android比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后 background-size:contain; ，这样显示出来的图片就比较清晰了。代码如下： background:url(../images/icon/all.png) no-repeat center center; -webkit-background-size:50px 50px; background-size: 50px 50px;display:inline-block; width:100%; height:50px; 或者指定 background-size:contain; 都可以，大家试试！图片加载若您遇到图片加载很慢的问题，对这种情况，手机开发一般用c anvas 方法加载：具体的canvas

Visual viewport detection in Firefox mobile browser

阅读更多关于 Visual viewport detection in Firefox mobile browser

问题 As the subject says, I need these zoom-tainted viewport dimensions (CSS-pixels) in Firefox mobile browser. How do I extract that? In webkit browsers it goes by window.innerWidth / innerHeight and works fine, but I just can't find the corresponding values for Firefox. 回答1: I had the same problem and came up with the following solution: Place a zero-pixel size "dummy" div in the bottom right corner of the screen (using "position:fixed") and query its position via getBoundingClientRect().left

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:

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...

Firefox mobile ignores viewport

阅读更多关于 Firefox mobile ignores viewport

问题 I'm testing viewport settings with different browsers on mobile phones and my tablet (Android 4). Firefox seems to be the only one that ignores my settings on the tablet. My doctype is HTML5. I couldn't find a working solution. Is there a way to deal with or a known problem? 来源： https://stackoverflow.com/questions/10466810/firefox-mobile-ignores-viewport

web前端入门到实战：CSS的语法与工作流

阅读更多关于 web前端入门到实战：CSS的语法与工作流

本篇则主要介绍 CSS 的语法与 CSS 是如何工作的。 CSS语法 1. 基本规则 CSS 规则主要由两部分组成：选择器(selector) 与声明(declarations) 。选择器(selector) 是开发者希望改变样式的 HTML 元素。声明(declarations) 则是开发者制定的希望 HTML 改变的元素规则，可以是一条或多条。每条声明(declarations) 由一个属性(property) 和一个值(value) 组成。属性(property) 是开发者希望设置的样式属性（style attribute）。值(value) 为属性的具体内容。属性与值之间由冒号隔开，声明与声明直接由分号隔开。 CSS中的注释以 /* 开始并以 */ 结束。 /* selector {property: value} */ h1 {color:red; font-size:14px;} 上面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。 2. 样式表书写规则每个HTML元素都有初始的样式，但是也可以经过开发者书写而改变样式规则。 HTML 的元素样式修改有以下的书写规则。内部样式表（写在 <head> 标签内部） <!DOCTYPE html> <html> <head> <style> h1

can an cross-domain iframe detect a browser's actual viewport dimensions?

阅读更多关于 can an cross-domain iframe detect a browser's actual viewport dimensions?

问题 I have an iframe loaded inside a parent page - the iframe and parent page are on different domains. Can my iframed site detect the actual browser dimensions? 回答1: You can use the web API window.postMessage method too. It safely enables cross origin communication. https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage 回答2: The simple answer, is no. It cannot. Unless by some means the parent window can dynamically send data to the object inside the iframe... However if the content