文档章节

html移动Web开发----优化浏览器视口宽度设置

g
 gethub_sl
发布于 2016/06/13 20:30
字数 215
阅读 31
收藏 1

 在移动设备上,要使移动设备无论竖屏还是横屏,都能使页面内容的宽度和设备的屏幕宽度相匹配,使文字易读性大大提高,我们可以按一下方法操作:

在<head>标签内添加<meta name="viewport" content="width=device-width">  由此使视口的宽度设置为匹配设备的宽度。

对于这个问题,一些较老版本的移动设备浏览器不能识别“viewport”,可以采用下面的方法:

在<head>标签内添加<meta name="HandheldFriendly" content="true">

对于微软的PocketPC,需要使用一个特别的“MoblieOptimized”属性:

<meta name="MoblieOptimized" content="320">

因此对于该问题最完整的解决方案的代码如下:

<meta name="viewport" content="width=device-width">

<meta name="MoblieOptimized" content="true">

<meta name="HandheldFriendly" content="320">

© 著作权归作者所有

共有 人打赏支持
g
粉丝 0
博文 22
码字总数 4460
作品 0
杭州
程序员
关于移动端的适配

写在前面 本文参考了大量关于移动端适配的资料 侵删 谢谢 基础介绍 在说明移动端的适配之前我们需要理解一个重要的东西 像素!! 像素 在移动端给一个元素设置时发生了什么?这里的px到底是多...

熊蛋子17
2017/12/31
0
0
第118天:移动端开发——视口

移动端视口的分类说明。在开始之前,先看一个典型的例子: 1 2 @media screen and (max-width:480px){3 //宽度不超过480px时的样式 4 } 上述代码相信大家在做移动端开发时经常去书写。它研究...

半指温柔乐
2017/12/18
0
0
PC端的viewport

视口 视口(viewport)的作用是限制元素,元素是所有网页块元素中最高一级的元素。 一个实际的例子。假设在一个流式布局中,你其中一个边栏的宽度是10%。现在当你改变浏览器宽度时,边栏会一...

金于虎
2016/10/27
5
0
浅谈Web图像优化

前端优化有很多,图像优化也是其中的一部分。无论是渐进增强还是优雅降级,图像优化成为了开发上不可忽视的一部分。 知其然,须知其所以然 图像优化的前提是需要了解图像的基本原理。常规的图...

johnson
2017/10/24
0
0
理解移动端viewport

参考文档:Safari Web Content Guide 首先要弄清楚 三个视口 的概念,分别是:视觉视口、布局视口、理想视口 1.视觉视口 就是指用户的可见视野。 2.布局视口 或许你不知道'布局视口'这个概念...

小尾巴儿
2016/12/05
10
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
7分钟前
0
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
41分钟前
0
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
0
0
openJDK之sun.misc.Unsafe类CAS底层实现

注:这篇文章参考了https://www.cnblogs.com/snowater/p/8303698.html 1.sun.misc.Unsafe中CAS方法 在sun.misc.Unsafe中CAS方法如下: compareAndSwapObject(java.lang.Object arg0, long a......

汉斯-冯-拉特
今天
2
0
设计模式之五 责任链模式(Chain of Responsibility)

一. 场景 相信我们都有过这样的经历; 我们去职能部门办理一个事情,先去了A部门,到了地方被告知这件事情由B部门处理; 当我们到了B部门的时候,又被告知这件事情已经移交给了C部门处理; ...

JackieRiver
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部