viewport

移动布局基础

由 只愿长相守 提交于 2019-12-04 11:57:34
移动布局基础 浏览器现状 pc端常见浏览器：360,谷歌，火狐，qq，百度，搜狗，IE浏览器 移动端常见浏览器：UC,QQ,哦朋，百度，360，谷歌，搜狗，猎豹等等 国内的uc和QQ，百度手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是Android修改开发的一样 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可 手机屏幕现状 移动端设备屏幕尺寸非常多，碎片化严重 Android设备有多种分辨率：480x800,480x854,540x960,720x1280,1080x1920等，还是2k,4k屏等 近年来iphone的碎片化也加剧了，其设备的主要分辨率有:640x960,640x1136,750x1334,1242x2208等 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px 移动端调试方法 Chome DevTools（谷歌浏览器）的魔你手机调试 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外网服务器，直接IP或域名访问 总结 移动端浏览器我们主要对webkit内核进行兼容 我们现在开发的移动端主要针对手机端开发 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 学会用谷歌浏览器模拟手机界面以及调试 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域

width=device-width not working in Mobile IE

由 爷，独闯天下 提交于 2019-12-04 11:28:29
问题 I'm trying to make a website that works well on mobile phones. So far every phone that I have tested works well, but phones with Windows Mobile IE. It seem that Mobile IE just reads over the <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/> and is not setting the width to device-width. Anyone have any experience with this or any tips of making the site better viewed on Mobile IE? Thanks for the help! 回答1: Mobile IE seems to only respect

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

由 ◇◆丶佛笑我妖孽 提交于 2019-12-04 10:15:17
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. However, if you replace A small amount of content with a large amount of content, ie... enough to

html--前端css样式初识

由 你离开我真会死。 提交于 2019-12-04 09:36:58
一、CSS概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 二、css样式的引入方法 1、行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <a style="background-color: aqua;color:

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

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-04 09:17:08
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 on a Samsung Galaxy S2 and S3 Mini running Android 4.1, I cannot set the initial-scale. The HTML

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

由 ℡╲_俬逩灬. 提交于 2019-12-04 08:15:36
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 my sever and displays the site in a <frameset> and canceling out my CSS and meta. When I go to the

0基础学习移动端适配

由 烂漫一生 提交于 2019-12-04 08:05:09
这是关于移动端适配的第一篇文章，这篇文章主要介绍 视口以及和视口有关的meta标签 的使用。 不管三七二十一，我们先新建一个页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这不是一个demo</title> <style type="text/css"> *{margin: 0; padding: 0;} div{height: 100px; background: red;} </style> </head> <body> <div></div> </body> </html> 在谷歌浏览器下，我们可以看到不同手机的适配情况： 可以看出，不管是i5/i6/i6plus下，div的宽度都为980px，这个980是什么值，为什么它好像和移动设备无关？ 其实这个980所表示的就是 布局视口 。 布局视口layout viewport ：就是移动设备上用来装载我们的网页的那一块区域。浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽度设置地很大，一般在 768px ~ 1024px之间。不同的设备有不同的宽度。最常见的宽度是980。下图是不同设备下布局视口的大小。 布局视口有980像素，可是我们的屏幕很小，按理说应该会有滚动条才是，可实际上并没有。这就需要归功于另一个视口

div with dynamic min-height based on browser window height

由 血红的双手。 提交于 2019-12-04 07:50:07
问题 I have three div elements: one as a header, one as a footer, and a center content div . the div in the center needs to expand automatically with content, but I would like a min-height such that the bottom div always at least reaches the bottom of the window, but is not fixed there on longer pages. For example: <div id="a" style="height: 200px;"> <p>This div should always remain at the top of the page content and should scroll with it.</p> </div> <div id="b"> <p>This is the div in question. On

移动端适配方案

由 巧了我就是萌 提交于 2019-12-04 06:44:28
讨论适配方案之前，先了解几个移动端的概念。 基础概念 设备像素(device pixels)： 又称为物理像素，是显示屏的最小物理单位。在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 设备独立像素(device independent pixels): 基于计算机控制的坐标系统和抽象像素（虚拟像素），由底层系统的程序使用，转换为物理像素的应用。例如meta里面设置width=device-width，这个device-width就是设备独立像素。 在chrome里 看到的375x667 320x480等等都是设备独立像素，其数值上等于CSS像素数组。 设备像素比(device pixel ratio)： 简称dpr，定义了设备像素和设备独立像素的对应关系，它的值可以按公式得到： 设备像素比 = 设备像素/设备独立像素 目前了解到有三种方法实现适配： 固定高度，宽度自适应 利用rem布局，viewport缩放 vw适配 固定高度，宽度自适应 垂直方向用定值，水平方向用百分比、定值、flex都行。这样设置之后就可以不用管手机屏幕的尺寸进行开发。该方法使用了完美视口： <meta name="viewport" content="width=device-width,initial-scale=1"> 但是该方法有个缺点，由于高度固定，会导致页面产生横向拉伸的视觉效果。

iOS 8.3 - Meta viewport with fixed width results in weird content scaling on orientation change

由 南笙酒味 提交于 2019-12-04 06:00:35
问题 After upgrading my iOS devices to iOS 8.3 I noticed some weird behavior with the meta viewport. If I set the viewport with fixed width(a number such as 640, other than device-width) and rotate my device while I am on a webpage, the whole content will get smaller and eventually the browser will crash. <meta name="viewport" content="width=640, initial-scale=1.0,user-scalable=no, target-densitydpi=device-dpi"> Is there a way to fix this issue? 来源： https://stackoverflow.com/questions/29737908/ios
订阅 viewport