<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"> <!-- wap自适应 //-->
网页中常常看见有这样的标记,他们是清浏览器缓存用的,记录下来,方便以后查询,以免忘记
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
PS:清除浏览器中的缓存,它和其它几句合起来用,就可以使你再次进入曾经访问过的页面时,ie浏览器必须从服务端下载最新的内容,达到刷新的效果。
禁止缓存
<meta http-equiv="Expires" content="-1">
下面3个清除缓存
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
让网页的宽度自动适应手机屏幕的宽度:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
第一行:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
第二行:
设定iphone端页面全屏。
第三行:
取消数字被识别为电话号码。
header和footer 可以看成是DIV正常用css操作就行了
一、天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> 二、淘宝 <title>淘宝网触屏版</title> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no" name="format-detection"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta property="wb:webmaster" content="c51923015ca19eb1"> <meta name="author" content="m.taobao.com"> <meta name="copyright" content="Copyright ©m.taobao.com 版权所有"> <meta name="revisit-after" content="1 days"> <meta name="keywords" content=""> <meta name="description" content=""> 三、京东 <title> 京东 - 手机版 </title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> <meta name="format-detection" content="telephone=no"> <meta name="Keywords" content="手机购物,WAP商城,日用百货,3C家电,汽车用品"> <meta name="description" content="京东手机版提供了包括数码、家电、手机、电脑配件、网络产品、 日用百货等数万种商品,手机快捷购物,就上京东手机版。"> 四、网易 <title>手机网易网</title> <meta charset="UTF-8"> <meta content="width=device-width,user-scalable=no" name="viewport"> <meta name="apple-itunes-app" content="app-id=425349261"> <meta name="apple-mobile-web-app-capable" content="yes"> 五、百度 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no"> meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。 手机端特有的有哪些? <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> 第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览; width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览; 第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式; 在web app应用下状态条(屏幕顶部条)的颜色; 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。 注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方 (会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。 第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。
.
相关推荐
在IT行业中,构建一个完整的商城静态网页是网页设计与开发中的一个重要环节,尤其在当前移动互联网高度发达的时代,网页必须具备良好的多设备适配能力,包括手机端和电脑端。这个压缩包文件“完整的商城静态网页...
6. **SEO优化**:查看源码中的元标签(meta tags)和头部信息(header tags),了解如何提高搜索引擎可见性。 7. **性能优化**:查找图片压缩、延迟加载、代码压缩和缓存策略等技术的运用。 总之,这个源码提供了...
源码中可能包含了meta标签,如<meta name="description">和<meta name="keywords">,以帮助搜索引擎理解网页内容,提高搜索排名。 7. **响应式设计**:随着移动设备的普及,响应式设计是现代网站的标准配置。源码...
同时,为了适配不同设备的屏幕尺寸,源码可能采用了响应式设计,如使用`<meta name="viewport" content="width=device-width, initial-scale=1">`标签来控制页面在移动设备上的显示。 其次,CSS(层叠样式表)是...
2. 设置viewport meta标签:在HTML头部添加`<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">`,确保页面宽度与设备宽度一致,并禁用用户缩放。...
3. **响应式设计**:通过CSS3媒体查询实现不同设备的适配,确保网页在手机、平板和桌面电脑上都有良好的显示效果。 4. **延迟加载**:对于长页面,使用JavaScript实现图片或内容的滚动时加载,减少首屏加载时间。 ...
在手机和电脑端通用的HTML代码需要考虑到不同屏幕尺寸的适配,这通常通过使用HTML5的新特性来实现,如`<meta name="viewport">`标签,它可以设置视口宽度,确保页面在不同设备上正确缩放。 2. 网页源码:源码是网站...
同时,你需要在`index.html`的头部添加`meta`标签,以控制视口的行为: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 为了将px转换为rem,你可以使用`px2rem-loader`。...
【标签】"asp"通常指的是Active Server Pages,是微软开发的一种服务器端脚本环境,用于生成动态网页。尽管本主题主要涉及PHP,但标签可能意味着此模板可能与ASP相关的技术有一定的兼容性或者可以作为对比学习的参考...
这个模板设计的主要目的是提供一个友好的用户界面,同时在不同设备上都能自适应地显示内容,确保在手机、平板电脑和桌面电脑上的用户体验。 首先,我们来看看核心技术: 1. PHP:作为服务器端脚本语言,PHP用于处理...
1. **响应式设计**:模板通常会采用响应式设计,确保在不同设备(如桌面、平板、手机)上都能自适应显示,提供良好的用户体验。"天高云淡"很可能也遵循这一原则,使论坛在多端设备上表现良好。 2. **界面布局**:好...
10. **SEO优化**:为了提高搜索引擎排名,模板会遵循SEO最佳实践,如使用合适的标题标签(H1-H6)、元标签(meta tags)、描述和关键词,以及合理的内容结构。 在解压母婴商城模板后,开发者需要根据自身需求对HTML...
响应式网站设计是一种现代网页开发技术,它允许网站在不同设备上自动调整布局,提供适应性的用户体验,无论用户是在桌面电脑、平板电脑还是智能手机上访问。在这个“基于PHP的网站建设响应式网站模板php版源码.zip”...
在微网站中,HTML可能需要特别考虑响应式设计,以适应不同屏幕尺寸的设备,使用meta标签来指定视口大小,确保页面在手机上能正确显示。 4. **CSS**: `css` 文件夹内包含了样式表,用于控制微网站的外观和布局。...
1. **头部(Head)**:包含元数据,如字符集声明(`<meta charset="UTF-8">`),页面标题(`<title>`),以及可能的CSS(Cascading Style Sheets)和JavaScript引用,这些都用于页面的样式和交互性。 2. **主体...
4. **优化**:确保模板对搜索引擎友好,包括合理使用HTML标签、优化图片大小和Alt属性、添加Meta标签等。 5. **测试**:在多个浏览器和设备上测试模板的显示效果,确保兼容性和用户体验。 了解了Z-Blog模板的基本...
6. **响应式设计**:考虑到不同设备的屏幕尺寸,网页可能采用了响应式设计,通过媒体查询(Media Queries)来调整布局,确保在手机、平板和桌面电脑上都能良好显示。 7. **Markdown**:GitHub Pages 支持Markdown...
这可能涉及到使用`<meta>`标签的`viewport`属性,以及媒体查询(@media)来调整布局,确保在手机、平板电脑和桌面电脑上都能良好显示。 5. HTML5新特性:HTML5引入了许多新元素和功能,如`<header>`、`<footer>`、`...
10. **响应式设计**:考虑到现代网页需要适应多种设备,项目可能包含响应式CSS,确保在手机、平板和桌面设备上都有良好的显示效果。 以上是对"rockorager.github.io"项目的初步分析,具体的内容和结构需要查看解...
8. **响应式设计**:现代网页常常采用响应式设计,确保网页在不同设备(手机、平板、电脑)上都能有良好的显示效果。这通常通过CSS的媒体查询(`@media`)实现。 9. **SEO(搜索引擎优化)**:虽然这是一个静态网站...