如何实现手机自动适应网页

将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单,可以利用meta标签声明。

工具/原料

  • sublime text

一方法/步骤

  1. 打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。
  2. 向浏览器声明该网页为移动设备自适应网页的meta标签为:

    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

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

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

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

3

将以上标签加入之后保存,再用手机打开即是自适应网页了。

二方法/步骤

  1. 方法:在网页头部加上这样一条meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

    解释:

    width=device-width :宽度等于设备屏幕的宽度

    initial-scale=1.0:表示:初始的缩放比例

    minimum-scale=0.5:表示:最小的缩放比例

    maximum-scale=2.0:表示:最大的缩放比例

    user-scalable=yes:表示:用户是否可以调整缩放比例

  2. 2

    另外:如果想控制字体的大小的话,应该使用相对大小,可以用下面这段代码,一般不用也可,这里只是说名一种方法。

    相对大小的字体

    字体也不能使用绝对大小px,而只能使用相对大小em。

      body {font: normal 100% Helvetica, Arial, sans-serif;}

    上面的代码指定,字体大小是页面默认大小的100%,即16像素。

      h1 {font-size: 1.5em; }

    然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

      small {font-size: 0.875em;}

    small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

时间: 2024-10-08 20:50:47

如何实现手机自动适应网页的相关文章

手机web——自适应网页设计

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-

NFC技术:让Android自动打开网页

1 //实现自动打开网页 2 //程序包含NFC的格式化,和向NFC写入数据 3 //程序运行好后,将NFC标签放在手机背部,..弹出toast后,关闭程序,再将NFC标签放在手机背部实现自动打开百度网页 4 public class AutoOpenUriActivity extends Activity { 5 private NfcAdapter nfcAdapter; 6 private PendingIntent pendingIntent; 7 String url = "https

【转】手机web——自适应网页设计(html/css控制)

手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献给大家. 作者:佚名来源: 68design | 2013-09-04 11:02 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport"

手机web——自适应网页设计(html/css控制)(转)

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-

Android 手机app 嵌入网页操作

1.主Activity的源代码: package com.jhtg.happyagent; import android.annotation.SuppressLint; import android.app.Activity; import android.graphics.Bitmap; import android.os.Bundle; import android.view.KeyEvent; import android.view.View; import android.view.W

通过Python3+selenium自动测试网页

使用的是selenium,最开始接触这个模块包是爬虫,这次是工作需要来自动测试网页. 记录一下模拟不同浏览器的方式 总共测了两个浏览器,Firefox在centos7上和chrome在win10上.都是模拟的IPAD方式访问,原因是使用模拟手机的话,会有部分内容被挡住导致无法模拟点击,┑( ̄Д  ̄)┍无奈. so,模拟手机和模拟IPAD是同样的操作,只是把对应IPAD的内容换成想要的手机就可以了. from selenium import webdriver # 使用Firefox手机浏览器 u

MFC实现自动对网页的搜索

1, <button id="loginBtn" class="btn btn-login formSubmit" tabindex="6" type="submit">登 录</button>按钮触发 思路 : 程序实现调用网页submit方法,以达到自动提交网页的目的,可能在很多时候都要用到, 笔者在网上找了很多资料,但大多是用com接口调用的,很少有讲用MFC的IHTMLFormElement方法

二维码快速扫码优化方案介绍(一)--怎么在光线不足时,手机自动进行补光。

二维码扫码已经是一个很通用的技术了,也有很多的开源项目可以实现,比如Zxing项目.https://github.com/zxing 这里重点不是介绍Zxing中是怎么样来实现二维码扫码的,而是来介绍一下,微信上的快速扫码技术是如何来做到优化体验的. 要实现在光线不足时,手机自动进行补光,其实很简单,每个人都知道,手机上有很多的传感器,其中有一个很重要的传感器就是光线传感器. 这个大家平时在拍照的时候,都用到过.那么如何能把这个应用到二维码的扫码体验上来呢. 我们可以利用手机的光线传感器进行外部

VBS脚本和HTML DOM自动操作网页

VBS脚本和HTML DOM自动操作网页 2016-06-16 10:24 1068人阅读 评论(0) 收藏 举报  分类: Windows(42)  版权声明:本文为博主原创文章,未经博主允许不得转载. 本来是想通过JS实现对其他页面的控制,发现跨域无法获取页面DOM来操作.接着考虑bat,发现也实现不了,于是想到vbs.vbs还是很强大啊,病毒之类很多都是vbs脚本啊.vbs打开浏览器,然后通过dom来操作页面,可以实现自动填写内容和按钮点击等.摸索了几个常用的,代码如下: 1.网页文本框赋