【viewport的故事（一）】的更多相关文章

两个viewport的故事（第二部分）

原文:http://www.quirksmode.org/mobile/viewports2.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕. 这篇文章我们来聊聊关于移动浏览器的内容.如果你对移动开发完全是一个新手的话,我建议你先读一下第一篇关于桌面浏览器的文章,先在熟悉的环境中进行下热身. 移动浏览器的问题 当我们比较移动浏览器和桌面浏览器的时候,它们最显而易见的不同就是屏幕尺寸.为桌面浏览器所设计的网…

两个viewport的故事（第一部分）

原文:http://www.quirksmode.org/mobile/viewports.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕. 这篇文章是关于桌面浏览器的,其唯一的目的就是为移动浏览器中相似的讨论做个铺垫.大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念.在移动端我们将会接触到相同的概念,但是会更加复杂,所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助. 概念:…

viewport的故事（二）

 挑重点的翻译 自原文 https://www.quirksmode.org/mobile/viewports2.html   在这一页我们将聊一聊移动端的浏览器.   移动端的问题   最明显的问题就是尺寸,比PC端小很多,要么整体缩小,那么文字几乎小到认不出来了,要么就只能看一部分. 所以我们要让网站在小屏幕也能很好的展现.   最重要的问题集中在CSS上,尤其是视口的尺寸,如果把PC的一比一放到移动端上,肯定是不起作用的,甚至是有点可怕. 你的布局将会被挤压变形.   一种方式是为移动浏览…

viewport的故事（一）

部分翻译 自原文 https://www.quirksmode.org/mobile/viewports.html   概念:设备像素和CSS像素   设备像素可以通过 screen.width/height 获取 比如,iPhone 7 Plus 的设备宽度是414px:   如果一个元素设置了 width:128px,那么在一个宽为1024px的显示器中,你需要把屏幕放大八倍,就能让这个元素占满屏幕 但如果用户已经设置了缩放为200%,那么要适应屏幕就还需要放大四倍.   用户缩放(zoom…

前端页面开发，最低兼容IE 8的多设备跨平台问题解决！

项目要求: 网站能够使用PC.ipad.mobile phone正常访问 页面PSD版式宽度分别为1024px和750px 参考资料 使用CSS3 Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备. Media Queries的语法如下所示: @media [media_query] media_type and media_feature 使用Media Querie…

【前端】移动端Web开发学习笔记【1】

下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了一些基本概念. Part 2: PC端的一些基本概念 screen.width/height 意义:用户屏幕的整体大小. 度量单位:设备像素. 浏览器错误:IE8以CSS像素对其进行度量,IE7和IE8模式下都有这个问题. 它们是显示器的属性,而不是浏览器的. window.pageX/YOffse…

移动Web应用开发入门指南——视觉篇

视觉篇 智能移动设备由于发展历史短,但更新速度快,从而导致移动设备的物理属性差异巨大,其中一部分物理属性影响视觉,另一部分影响到交互.兼容或性能.对人类来说,至少有80%以上的外界信息通过视觉获得,视觉是人和动物最重要的感觉,所以,咱们从视觉开始说起. 看一个案例: 访问m.3600.com首页,首页焦点图,在iPhone 4下显示如下,焦点图两侧没有空白:图1 但在Samsung Galaxy S4下,焦点图两侧就有明显的留白:图2 在这个应用场景中,页面的展示效果由于设备的物理分辨率不同而产…

草珊瑚的css基础

首先要了解如下概念: viewport,窗口大小,containing block,block formatting context,inline formatting context,dirction和unicode-bidi,display和float以及postion的三者关系,盒子模型. 一.viewport viewport是你所看到的窗口.它有两个重要属性,一个是css像素,另一个是设备像素. 设备像素由分辨率决定,css像素由开发者决定. 设备像素和css像素的关系有 1.重叠,即…

pc端和移动端的“窗口”(viewport)故事（part1）

A tale of two viewports - part one 在以下的系列文章中,我将为大家解释浏览器中的视窗和一些重要的元素的尺寸是如何起作用的,如:大家最熟悉的html元素以及window和screen对象. 这篇文章作是本系列的第一部分,是关于台式电脑的浏览器的,主要目的是为后续的移动端浏览器的讨论奠定一个基础.大部分的web开发者能够凭直觉理解大部分台式机浏览器的概念.在移动端我们也将遇到一样的概念,不过对于这些人人都知道的概念进行更加复杂和预先的讨论将会极大地帮助大家理解移动端…

jQuery Mobile_简单的爱情故事

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/> <title>无标题文档</title> &l…