文档章节

各大门户手机端页面是怎么切得

奥巴码侬
 奥巴码侬
发布于 2014/12/08 18:56
字数 859
阅读 372
收藏 0

这几天 换了公司,新公司的几个页面需求是需要根据 手机屏幕大小自适应 缩放。

第一次 搞搞没有资料没有文档,居然把我一个搞过移动端的哥们都问的来懒得搭理我了 00!

大体先介绍下几个门户网站的做法

1 我最爱的网易(我最爱看评论

meta

<!--初始页面缩放大小,禁止用户缩放-->

<meta content="width=device-width,user-scalable=no" name="viewport">

<!--phone设备中的safari私有meta标签,它表示:允许全屏模式浏览-->

<meta name="apple-mobile-web-app-capable" content="yes">

<!--iOS6新标签,当你在iOS移动平台访问一个网站时,会提示你去App Store下载这个网站的官方App-->

<meta name="apple-itunes-app" content="app-id=425349261">

header nav 高度px写死

列表页width:100%;正文页页面设了个max-width: 950px;

字体大小 px写死的;

padding 用的百分比 如新闻列表li: padding:0 3.1%;

margin 用的 pt 如文章正文p 标签 margin: 15pt 0;

图片 用的 width:100%; 然后设了个max-width


2 腾讯

meta

<!--如果安装了GCF(谷歌的插件让ie跑webkit)则GCF来渲染,没安装则用ie最高版本内核渲染, 更多click here-->

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--比网易多了个 初始化页面比例 initial-scale,禁止缩放写的也更加严谨-->

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<!--这是shenma ?-->

<meta name="shenma-site-verification" content="f28da5e2e3fb6e2afd372a3eedfda998">

<!--在web-app状态条的(屏幕顶部条)颜色-->

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!--版权归腾讯所有-->

<meta name="copyright" content="Copyright (c) 1998-2013 Tencent.">

<!--windows专有meta,识别移动内容,支持情况未知-->

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

header nav footer nav 里面的 width:34px; height:20px;

新闻列表 用css @media 写的,当屏幕小于321px时,自适应品目宽度,当屏幕大于321px,分为俩排,各站50%;

字体大小 px写死

padding margin 媒体查询 重写css

img 大小写死


3 压轴的大哥来了 淘宝

meta

<!--添加到主屏幕,全屏显示-->

<meta content="yes" name="apple-touch-fullscreen">

<meta content="yes" name="apple-mobile-web-app-capable">

<!--这又是神马-->

<meta name="data-spm" content="a215s">

<!--不识别邮件和不把数字识别为电话号码-->

<meta content="telephone=no,email=no" name="format-detection">

<!--这也应该是允许手机全屏,不知道只对谁的。。-->

<meta content="fullscreen=yes,preventMove=no" name="ML-Config">

<!--老大用的0.5,看来直接切的640的页面-->

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

m.taobao.com的padding margin width height font-size 都是用的rem;

首页的图片其实是background;background-size:contain来控制的大小;

大屏访问(桌面,pad等)m.tao.com,页面dom#content会给个max-width="65rem"; html的font-size:33.75px;

手机访问会根据屏幕的分辨率设置html 的font-size;font-size改变从而 rem的值改变,页面的padding margin font-size,都会根据手机屏幕的分辨率大小而响应改变。手机横过屏来的时候,js会判断屏幕的大小然后算出相对的值, 320的屏(如ipone4)html的 font-size:40px,iphone横过来 480 /320*40 = 60;


其他相关的:

//这行代码可以指定网页使用 webkit 引擎渲染,当然,只对 360 浏览器 6.5+ 有效


<meta name="renderer" content="webkit">
// 如果你的网站不想被剥去外衣、往赤裸的身体上贴广告,就加上 下面的代码



<meta http-equiv="Cache-Control" content="no-siteapp" />

这个应该是需要换掉了 click here

<meta http-equiv="Cache-Control" content="no-transform " /> 


© 著作权归作者所有

下一篇: 正则
奥巴码侬
粉丝 33
博文 122
码字总数 43584
作品 0
西城
程序员
私信 提问
加载中

评论(1)

人渣星
谢谢分享~~~
前端开发,切图,H5,响应式布局,web前端

服务标准 1、常规切图-企业、电商、门户等网站常规页面制作 2、快速仿站-提供仿站网址,网站前端全功能模仿 3、HTML5页面-手机、微信等移动端页面、响应式页面前端制作 4、JS动画效果-网站局...

zjqiudan
2016/11/25
141
0
政府门户建设新趋势——中国政府网站绩效评估会后的思考

当今世界,信息化已经进入全面普及、深度渗透、加速发展的新阶段,并正在逐步成为新时期打造网络时代社会主义民主建设新平台,推动转变政府职能、增强公共服务能力的根本途径。而移动互联网的...

brwdylpwgy
2013/12/30
0
0
政府门户建设新趋势——中国政府网站绩效评估会后的思考

当今世界,信息化已经进入全面普及、深度渗透、加速发展的新阶段,并正在逐步成为新时期打造网络时代社会主义民主建设新平台,推动转变政府职能、增强公共服务能力的根本途径。而移动互联网的...

sandykang
2013/12/30
92
0
AEAI Portal手机门户配置手册

概要 AEAI Portal门户平台专门为前端界面层集成而设计,具有开放、敏捷的特性,能够快速配置多异构系统(如:OA、ERP、MIS、CRM等)统一用户认证、单点登录、菜单集成、页面集成、页面剪切、...

数通畅联
2015/04/14
75
0
2016/12/28工作小结

1.①工会修改,主要是登录后的首页改动比较大,去掉了所有的图形,改为文字。已经备份 ②远程付长娥教他如何装浏览器 2.翠荫农业门户,还剩下手机端。 3.联系建行信用卡分析,确认图和页面待...

并不是
2016/12/28
1
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Alibaba 实战(二) - 关于Spring Boot你不可不知道的实情

0 相关源码 1 什么是Spring Boot 一个快速开发的脚手架 作用 快速创建独立的、生产级的基于Spring的应用程序 特性 无需部署WAR文件 提供starter简化配置 尽可能自动配置Spring以及第三方库 ...

JavaEdge
今天
7
0
TensorFlow 机器学习秘籍中文第二版(初稿)

TensorFlow 入门 介绍 TensorFlow 如何工作 声明变量和张量 使用占位符和变量 使用矩阵 声明操作符 实现激活函数 使用数据源 其他资源 TensorFlow 的方式 介绍 计算图中的操作 对嵌套操作分层...

ApacheCN_飞龙
今天
7
0
五、Java设计模式之迪米特原则

定义:一个对象应该对其他对象保持最小的了解,又叫最小知道原则 尽量降低类与类之间的耦合 优点:降低类之间的耦合 强调只和朋友交流,不和陌生人说话 朋友:出现在成员变量、方法的输入、输...

东风破2019
昨天
23
0
jvm虚拟机结构

1:jvm可操作数据类型分为原始类型和引用类型,因此存在原始值和引用值被应用在赋值,参数,返回和运算操作中,jvm希望在运行时 明确变量的类型,即编译器编译成class文件需要对变量进行类型...

xpp_ba
昨天
5
0
聊聊nacos Service的processClientBeat

序 本文主要研究一下nacos Service的processClientBeat Service.processClientBeat nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/core/Service.java public class Service ex......

go4it
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部