移动端的特殊头部布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=320, maximum-scale=2,  minimal-ui">
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="Expires" CONTENT="0">
    <title>fasdasda</title>
    <link rel="stylesheet" href="css/wxqiandao.css">
    <script src="js/jquery-1.7.2.js"></script>
</head>

这样布局会自动缩放， content="width=320只需按照320来宽网站来写就可以了，maximum-scale=2让网页可以缩放到320的2倍640了。

时间： 2024-07-31 18:34:43

移动端的特殊头部布局的相关文章

移动端网页 rem 自适应布局

(function(doc , win){var DocElement = doc.documentElement;var RsizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';function ResetSize(){var deviceWidth = DocElement.clientWidth;if(!deviceWidth){return false;}DocElement.style.fo

浪潮存储：2015年发力高端完善产品线布局

国内存储市场在过去多年都是国际品牌的天下,本土厂商一直处于市场竞争的弱势.近年来,随着本土品牌厂商在技术研发上的持续投入与积累,本土厂商开始崛起,逐渐在存储市场打开局面,正稳步成长为可以与国际品牌厂商叫板的一股力量.近日,浪潮存储对外宣布其2015年存储战略规划,直言2015年将会是浪潮存储改变的一年,结合以数据为核心,重点将会发力高端存储领域,并且会逐步完善存储产品线布局. 发力高端存储市场一直以来,国内高端存储市场都是EMC.HDS以及IBM等国际厂商在唱主角,这些厂商凭借着多年的产品技术

浅谈前端移动端页面开发（布局篇）

前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档去了.本以为自己对移动端的那一丢丢理解,结果很多东西都特么有问题,所以,今天停下了手中的一些东西,来谈下移动端的布局方案吧内容有些长,这也是我第一次写博客,不足之处还请严厉指出一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的

细说移动端经典的REM布局与新秀VW布局

和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局实现单边边框1px 实现多边边框1px 实现边框圆角实现容器固定纵横比 5. REM + VW布局 6. 对比选择方案选择食用方式一.前言说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等等. 而另一方面,还有一些布局概念: 1. 静态布局直

移动端web自适应适配布局解决方案

100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1.设置理想视口: 自动适应屏幕宽度 :网页的宽度默认等于屏幕的宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.

移动端页面使用rem布局

阿里团队的高清布局方案代码所谓高清方案就是根据设备屏幕的DPR(设备像素比,又称DPPX,比如dpr=2时,表示1个CSS像素由4个物理像素点组成) 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值,进而达到高清效果**. var _baseFontSize = baseFontSize || 100; var _fontscale = fontscale || 1; var win = window; var doc = win.document; var ua

移动端web app自适应布局探索与总结

要掌握的知识点: iphone6 屏幕尺寸为 375*667 (pt)也就是网页全屏显示时候 document.documentElement.clientWidth------可以理解为屏幕越大这个值越大(但是像素不一定高) dpr(设备独立像素):2.0 可用(window.devicePixelRatio)得出 (------------像素越高或者屏幕越小-------dpr越大) window.devicePixelRatio = 物理像素 / dips 屏幕分辨率为 750

在移动端中的flex布局

flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, 想让另外一个div的占据剩下的宽度: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

微信端打开页面，布局乱了

微信打开.二微码布局乱了:原因:布局问题: 这个地方写了两个display:把display:inline-block 删除就可以了. 我写了两个display:inline-block:不过有一点小疑问,为什么我刚开始没hover前是display:none;这不是块级元素,因为之前是display:inline-block:已经布好局了.display:none隐藏时删除就可以了. .你的a标签给了display:block,那就把width:100%; 因为你是默认的,导致一些浏览器右边点