viewport | 易学教程

CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）

阅读更多关于 CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）

首先，我们来看下垂直居中：（1）、如果是单行文本，则可以设置的line-height的数值，让其等于父级元素的高度！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ background: green; height:200px; } a {height:100%; line-height: 200px; color:red; } </style> </head> <body> <div class="box"> <a href="">ggg </a> </div> </body> </html> （2）、如果元素是行内块级元素，一般会使用diaplay:inline-block,vertical-align:middle，还有一个伪元素让元素内容处于容器中央！给父元素添加伪元素！ <!DOCTYPE html> <html lang="en"> <head> <meta

Why won't my viewport tag properly use device width (no zoom) on most mobile devices?

阅读更多关于 Why won't my viewport tag properly use device width (no zoom) on most mobile devices?

UPDATE 03/2019: This Q&A still gets some activity, nearly 5 years my question came up. Please note this problem was due in part to more common irregularities in older mobile devices at THAT time. With today's browsers and devices, fiddling with viewport scalability would be a shoe-horn fix to a bigger problem which is likely a problem in either your CSS or possibly your markup. I've built a dozen responsive sites and have never experienced this problem. Basically, I'm using the meta tag for viewport with width=device-width, but iPhone and Android devices are still zooming. For some reason, I

Height of the iPad Safari viewport

阅读更多关于 Height of the iPad Safari viewport

The viewport of the iPad is 980 pixels wide. What's the height? In Safari we must add the address and the new taps. What is the height Safari in landscape mode? There is a media query to fit the web to the width - is there a way to fit the web to the height? testndtv Below are the answers; You are right. The default viewport on both iPhone/iPad is 980px. There is no default viewport height, as such. You can change the width/height using; <meta name="viewport" content="width=device-width, height=device-height" > I could not quite understand the question. But yes, since the iPad resolution is

IE 10 on WP8 ignores media queries?

阅读更多关于 IE 10 on WP8 ignores media queries?

I'm working on a site that uses media queries. I can see in my desktop browser that they are working correctly, but when I navigate to the site on my WP8 device, no CSS is loaded. I've created a very simple HTML page to replicate the problem and show what solution I tried, but couldn't get to work. Here is the entire code: <html> <head> <title>WP8 Test</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> @-webkit

<meta charset=\"utf-8\" name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes\"/>

阅读更多关于

移动端页面详解

阅读更多关于移动端页面详解

viewport是什么? 一般来说，在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内。手机浏览器把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 layout viewport：是网页的所有内容，他可以全部或者部分展示给用户。 visual viewport：是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。 viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用window.innerHeight还是window.screen.width拿到的都是320px。当然我们可以通过meta设置改变viewport的比例，如initial-scale=.5就可以让viewport和屏幕一致的尺寸，这个比例在不同的手机上并不一定是2倍关系，特别是Android手机。而且改变viewport比例后可能会导致后续制作中出现一系列问题。另外Android系统中可以在viewport设置target-densitydpi=device

@viewport, @media and LESS

阅读更多关于 @viewport, @media and LESS

I've recently converted some CSS to LESS for use with a .NET application (I am using dotless for .NET, http://www.dotlesscss.org/ to compile the LESS at runtime). The compiler is falling down on these two blocks of code: @viewport { width: device-width; } /* Add a min-width for IE 8 and lower */ @media \0screen\,screen\9 { body { min-width: 960px; } } Just for your reference, the media query above is a hacky way of targeting IE How can I "LESS-ify" these blocks of code? Martin Turjak In Less >= 1.4.0 you can simply define a variable and use it in the media query: @iehack: \0screen\,screen\9;

适配方案（四）适配的基础知识之单位、分辨率、viewport

阅读更多关于适配方案（四）适配的基础知识之单位、分辨率、viewport

适配的基础知识一、理解单位 px、pt、pc、sp、em、rem、dpr、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi 如果你是ios开发，你需要了解的单位：pt，px，ppi；实际开发中用到的单位：pt。如果你是android开发，你需要了解的单位：dip/dp，sp，px，dpi/ppi，ldpi，mdpi，hdpi，xhdpi，xxhdpi；实际开发中用到的单位：dp，sp。如果你是前端开发，你需要了解的单位：px，em，rem，dpr；实际开发中用到的单位：px，em，rem，dpr 1、dpi / ppi dpi：dot per inch ，每英寸的点数；打印或印刷领域使用的单位，代表打印机每英寸可以打印出的点数。 ppi：pixel per inch ，每英寸的像素数，像素密度；表示图像或者显示器单位面积上像素数量。 dpi 和 ppi 都是描述分辨率的单位，但是两者是有区别的，但是在描述手机分辨率时，可以认为两者意义相同，以前android设备偏向于使用 dpi ，ios设备偏向于使用 ppi ，目前android和ios统一使用 ppi 描述手机屏幕的像素显示密度。 2、ldpi、mdpi、hdpi、xhdpi、xxhdpi android对移动设备不同屏幕分辨率的分类 3、pt，pc，sp pt：磅（point的音译

Flutter样式和布局控件简析(二)

阅读更多关于 Flutter样式和布局控件简析(二)

开始继续接着分析Flutter相关的样式和布局控件，但是这次内容难度感觉比较高，怕有分析不到位的地方，所以这次仅仅当做一个参考，大家最好可以自己阅读一下代码，应该会有更深的体会。 Sliver布局 Flutter存在着两大布局体系（就目前分析），一个是Box布局，还有另外一个就是Sliver布局；但是Sliver布局明显比Box会更加复杂，这真是一个坎，那么为啥说Sliver更加复杂尼，请看一下对比：首先是Box布局，主要看输入的BoxConstraints（约束）和输出Size（尺寸） class BoxConstraints extends Constraints { const BoxConstraints({ this.minWidth: 0.0, this.maxWidth: double.infinity, this.minHeight: 0.0, this.maxHeight: double.infinity }); } class Size extends OffsetBase { const Size(double width, double height) : super(width, height); } 而Sliver布局，SliverConstraints（约束）和输出SliverGeometry class SliverConstraints

Resize Images as viewport resizes without sides being cut off

阅读更多关于 Resize Images as viewport resizes without sides being cut off

问题 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

订阅 viewport