viewport

移动页面自适应手机屏幕宽度

由 时光怂恿深爱的人放手 提交于 2020-02-01 20:19:22
网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。 1、 使用meta标签 ，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 首先解释该标签的含义： <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 如果你完全不了解这个标签的使用需要先百度一下。 解 释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指 的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准， 正确的做法是用js动态生成此标签 ，当然，应该先获取屏幕尺寸。 对于此标签还有以下需要分享： 1)、user

响应式布局 媒体查询法

由 孤人 提交于 2020-02-01 01:24:36
媒体查询法响应式布局 先看看具体的效果如下图，在不同大小的端口适应各种设备： 既然是响应式布局当然得用弹性盒子和定位，比例和百分比才是适应各个设备的关键之一，因为制作的目的主要是理解媒体查询该怎么用这里就没有涉及到js部分。 制作方法： 1. 首先先写pc端口的样式，运用flex和position将基本样式写好。 2. 当写好这个基本样式就是媒体查询的重要步骤之一：先将下列代码添加入html文件head中 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 这列代码的作用是让视口形成自适应，首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。我们可以 用meta标签把viewport的宽度设为那个理想的宽度 ，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale

BootStrap——CSS

由 你。 提交于 2020-01-28 17:36:10
1、HTML5文档类型 Bootstrap 使用了一些 HTML5 元素和 CSS 属性，因此需要使用 HTML5 文档类型，开头定义如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> 2、移动设备优先 Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签： <meta name="viewport" content="width=device-width, initial-scale=1"> "viewport"：设备上用来显示网页的那部分区域，通常都有一个默认值"content":宽度为设备的理想宽度"initial-scale=1"：初始缩放值还可以添加其它属性对最大/小缩放值和是否允许缩放进行设置: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 3、响应式图像(可以让图像按比例缩放，不超过其父元素的尺寸) <img src=" " class="img

移动端适配的总结

由 故事扮演 提交于 2020-01-27 22:08:18
说起移动端页面也是老生常谈了，最近正好在做金融商城移动端的开发，正好梳理下这一块的知识点，提炼和总结。 一 什么是移动端页面 首先 不扯那些长篇大论，常见的移动端页面主要就三种，即H5页面、手机页面、以及webview页面。 移动端的兴起，访问的流量很大一部分都来自于手机，而通常当手机访问页面的时候，每台设备的分辨率、型号、屏幕尺寸都不一致，导致移动端的兼容适配成为一个很难忽视的问题。 为了让设计稿在大部分设备上都能有相对满意的效果，尤其是在移动端，显然在pc端的px计算像素的方式已经不适用。 二 几个名词 1 viewport 现在开发的页面主要集中在H5页面这个方向，而说到移动端页面，就必须要提到viewport. 先说用到哪，再说是什么、为什么这么用。 随便打开一个线上的H5的页面，你都会在head里发现这个标签<meata name="viewport" content="initial-scale=..., maximun-sacle=..., minimun-scale=..., user-scalable=no"> 金融商城H5端 淘宝移动端 所有的移动端页面都用到了这个属性，那么这个属性的定义是什么？ 我们知道手机的分辨率各有各的不同，很难做到一套代码，所有的机型都适配，再加上一些历史的原因，浏览器对移动端的属性支持力度不同

CSS中设置元素的圆角矩形

由 怎甘沉沦 提交于 2020-01-26 13:31:16
CSS中设置元素的圆角矩形 圆角矩形介绍 在 CSS 中通过 border-radius 属性可以实现元素的圆角矩形。 border-radius 属性值一共有 4 个，左上、右上、左下、右下。 border-radius 属性值规则如下：第一个值为左上、第二个值为右上、第三个值为左下、第四个值为右下。 假如 border-radius 属性值都是一致的我可以设置一个属性值即可。 圆角矩形实践 圆角矩形基本使用方式 <!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>圆角矩形</title> <style> div{ width: 100px; height: 100px; border: 2px solid rebeccapurple; border-radius: 10px 20px 30px 40px; } </style> </head> <body> <div></div> </body> </html> 如果我们的 border

Script For Assigning Viewport Meta Parameters, iPhone / iPad Conundrum

由 拜拜、爱过 提交于 2020-01-24 17:05:26
问题 I am using a JavaScript snippet to set the content parameters of the viewport meta tag, based on the width of the browser window. The script does almost what it should: it sets the initial scale value for any large screen device as 1, for iPad in portrait mode as 0.5, and for any devices smaller than 700px in screen width, back to 1. However, it seems to ignore the value assigned for iPad in landscape mode: 0.75. I suspect somehow I incorrectly the conditional for width in the landscape mode.

[笔记]移动端的 viewport 和各种像素区分

由 帅比萌擦擦* 提交于 2020-01-24 02:31:01
一、关于移动端的viewport 1 简介 设备的宽度是移动设备浏览器和桌面浏览器的最大区别，移动设备的屏幕宽度被桌面浏览器小，经常最大就400px。移动设备浏览器厂商期望它们的客户端在浏览PC页面时，能提供更像桌面浏览器的体验。 因为viewport太窄，不能很好为你的基本CSS布局服务了。最显然的解决方法是让viewport更宽。因此这个需求分为了2个方面：visual viewport和layout viewport。 visual viewport是当前显示在屏幕上的页面的一部分。一般来说，layout viewport比visual viewport要宽得多，并且包含出现在屏幕上的元素。设想layout viewport是一个大的图像，它不会改变大小或形状。现在假设你有一个较小的框，通过它你可以看到大的图像。小的框被不透明的材料包围，遮盖了所有的视图，除了大图像的一部分。可以通过框架看到大图像的部分是visual viewport。你能改变这个框的方向，但这样图片的大小和形状都不会改变。 每个移动端浏览器的layout viewport的宽度都不同。下图列出了一些设备上浏览器的默认viewport宽度。 layout viewport的尺寸为document.documentElement.clientWidth/clientHeight。 visual

移动页面适配－viewport缩放

由 久未见 提交于 2020-01-24 02:17:36
移动端适配方案1, 采用一个基准宽，对当前viewport进行缩放 相关代码如下： <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no" /> <script type="text/javascript"> var clientWidth = document.documentElement.clientWidth, viewport = null, viewportWidth = 'device-width', viewportScale = 1, normalWidth = 2048; if (clientWidth > normalWidth) { viewport = document.getElementById('viewport'); viewportScale = clientWidth / normalWidth; viewportWidth =

1px 究竟是多大

由 老子叫甜甜 提交于 2020-01-23 13:13:39
一、引言 　　1px 究竟是多大？这应该是一道很不错的面试题。且看： 　　1、iphone6s 的分辨率是1920px * 1080px 　　2、iphone6s 全屏截图文件的尺寸是1242px * 2208px 　　3、iphone6s 的宽度是414px 　　4、iphone6s 不加 viewport 的情况下，window.innerWidth = 980px 　　5、iphone6s 加 viewport 且 scale 都为1的情况下，window.innerWidth = 414px 　　6、iphone6s 加 viewport 且 scale 都为.5的情况下，window.innerWidth = 829px 　　这些 px 单位都是啥？ 二、几个关键概念 　　设备像素：设备的物理像素，其尺寸大小是绝对的 　　逻辑像素：CSS 的像素单位，其尺寸大小是相对的，也称为独立像素 　　分辨率：屏长的设备像素 × 屏宽的设备像素 　　dpi（dots per inch）：像素密度，表示水平或垂直方向每英寸长度的像素数目 　　ppi（pixels per inch）：像素密度，表示沿对角线每英寸长度的像素数目 　　（dpi 和 ppi 其实不就是一回事吗，呵呵） 　　缩放因子（Scale Factor）：逻辑像素相对于设备像素的放大比例，可通过 window

Retina屏的移动设备如何实现真正1px的线

由 早过忘川 提交于 2020-01-22 13:23:01
前些日子总被人问起 iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决？ 原来一直没在意，源于自己根本不是像素眼…… 今天仔细瞅了瞅原生实现的边框和CSS设置的边框，确实差距不小…… 上图是原生实现，下图是 CSS 边框，手机上对比更加明显 然后，如何解决呢？搜遍整个谷歌，发现好多人早已开始研究解决方案了。到底有哪些方案，到底好不好用呢？试过才知道，把我试过的结论记录一下。 有说用 0.5px 解决的 在2014年的 WWDC，“设计响应的Web体验” 一讲中，Ted O’Connor 讲到关于“retina hairlines”（retina 极细的线）：在retina屏上仅仅显示1物理像素的边框，开发者应该如何处理呢。 他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框： 额的神呐！so easy! 果真如此吗？ 这样还不够（WWDC幻灯片通常是“唬人”的），但是相差不多。 问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和 之前版本，OS X Mavericks 及以前版本，还有 Android 设备。 解决方案 解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给 <html> 元素添加个 class 。 1 2 3 4
订阅 viewport