index.html



<!DOCTYPE HTML>

<html>

<head>

    <!--申明当前页面的编码集-->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--网页标题-->

    <title>HTML5移动端开发模板</title>

    <!--网页关键词-->

    <meta name="keywords" content="" />

    <!--网页描述-->

    <meta name="description" content="" />

    <!--适配当前屏幕-->

    <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 content="email=no" name="format-detection" />

    <!--iphone中safari私有meta标签,

        允许全屏模式浏览,隐藏浏览器导航栏-->

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

    <!--iphone中safari顶端的状态条的样式black(黑色)-->

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

    <style type="text/css">

        /*reset 重置*/

        body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,

        td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}

        li{list-style:none;vertical-align:top;}

        table{ border-collapse:collapse;}

        textarea{resize:none;overflow:auto;}

        img{ border:none; vertical-align:middle;}

        em{ font-style:normal;}

        a{ text-decoration:none;}

        a,input{

            -webkit-appearance: none;/*屏蔽阴影*/

            -webkit-tap-highlight-color:rgba(0,0,0,0);

            /*ios android去除自带阴影的样式*/

        }

        a, img {

            /* 禁止长按链接与图片弹出菜单 */

            -webkit-touch-callout: none;

        }

        html, body {

            /* 禁止选中文本(如无文本选中需求,此为必选项) */

            -webkit-user-select: none;

            user-select: none;

        }

        /*public*/

        html {

            font-size : 20px;

        }

        @media only screen and (min-width: 401px){

            html {

                font-size: 25px !important;

            }

        }

        @media only screen and (min-width: 428px){

            html {

                font-size: 26.75px !important;

            }

        }

        @media only screen and (min-width: 481px){

            html {

                font-size: 30px !important;

            }

        }

        @media only screen and (min-width: 569px){

            html {

                font-size: 35px !important;

            }

        }

        @media only screen and (min-width: 641px){

            html {

                font-size: 40px !important;

            }

        }

        body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif;

            overflow-x:hidden; overflow-y:auto; font-size:0.7rem;

        }

        .clear{zoom:1;}

        .clear:after{content:''; display:block; clear:both;}

        .fl{float:left;}

        .fr{float:right;}

        .viewport{ max-width:640px; margin:0 auto; overflow-x:hidden;}

    </style>

</head>

<body>

<div>

    <div>移动端开发模板</div>

</div>

</body>

</html>

mobile移动网页开发常用代码模板的更多相关文章

  1. VisualStudioCode网页开发常用插件

    VS下载链接 提取码:usx8 VsCode扩展功能强大,在于他可以安装各种各样的插件来辅助开发.下面是我初学前端时常用的vscode开发插件 Chinese 汉化 Beautify 格式化javas ...

  2. 前端-个人网页开发最常用的插件Superslide 与 swiper

    给初入前端的同学,安利2个轮播图插件 SuperSlide 与 Swiper ! SuperSlide PC端与移动端 的轮播图特效都是分开写2个js插件,而Swiper 基本一个插件可以写PC端与移 ...

  3. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  4. CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    =======================================================================================前端CDN公共库===== ...

  5. IOS-网络（网页开发-UIWebView，HTML，CSS，JavaScript，OC和JS代码互调）

    一.网页基础 // // ViewController.m // IOS_0218_网页开发1 // // Created by ma c on 16/2/18. // Copyright © 201 ...

  6. iOS开发-常用第三方开源框架介绍

    iOS开发-常用第三方开源框架介绍 图像: 1.图片浏览控件MWPhotoBrowser        实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网 ...

  7. web前端开发常用的10个高端CSS UI开源框架

    web前端开发常用的10个高端CSS UI开源框架   随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...

  8. 网页设计师常用的PHOTOSHOP插件

    Photoshop是网页设计师常用的一个非常重要而强大的工具,可以让网页设计师的工作高效便捷的进行,也为设计师们的天马行空提供了实际技术实现.一般我们的网页设计师设计完成后,需要将其转换制作成网页形式 ...

  9. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 | Kayo's Melody

    最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mob ...

随机推荐

  1. SQL SERVER 扩展属性的操作方法

    将数据库迁移到 Azure SQL 数据库时出现错误,不支持扩展属性“MS_Description”,因此就如何操作扩展属性进行在此记录. 查询扩展属性 SELECT *,OBJECT_NAME(ma ...

  2. gradle/maven/eclipse工程相互转化

    原文:  gradle/maven/eclipse工程相互转化 gradle/maven/eclipse工程相互转化:前提安装好相应的工具和插件.1.Maven->eclipse mvn ecl ...

  3. Html.BeginForm() vs Ajax.BeginForm() in MVC3

    我们知道,BeginForm()方法能创建一个Form标签,因此可以结合表单级的方法,在这个页面中.我一直在考虑Html.BeginForm()方法和Ajax.BeginForm()方法在MVC3中有 ...

  4. 【linux】centos7终端中文显示乱码，命令返回中文乱码

    centos7终端中文显示乱码,命令返回中文乱码 1.查看服务器编码的命令 1.1 echo $LANG 1.2 locale 1.3 查看终端xshell编码 如果以上的三点依旧保持一致,而依旧乱码 ...

  5. 【xshell】xshell设置快捷键 设置Ctrl+C Ctrl+V快捷键为复制粘贴

    在使用xshell的时候,总是不能顺手的进行复制粘贴的操作. 那能不能设置xhsell的快捷键呢? 点击工具--->选项---> 选择 键盘和鼠标 选项卡--->点击编辑----&g ...

  6. tomcat sso 配置

    源: http://www.oecp.cn/hi/single/blog/349 为了实现单点登录,做了个CAS SSO单点登录实例,经过反复的琢磨和修改终于成功了,现将CAS SSO单点登录实例详细 ...

  7. Android之计算两个时间的相差

    参数:   sdate = 2013-07-16 16:14:47 /** * 以友好的方式显示时间 * @param sdate * @return */ public static String ...

  8. Eclipse中运行Tomcat遇到的内存溢出错误

    使用Eclipse(版本Indigo 3.7)调试Java项目的时候,遇到了下面的错误: Exception in thread "main" Java.lang.OutOfMem ...

  9. avi视频格式转yuv格式与播放yuv视频

    因为要用到yuv格式视频.而眼下仅仅有avi格式的视频,所以须要转换,而且opencv不支持yuv编码的视频播放.所以须要转换为rgb编码.而后播放.写了两个程序.以供參考: 1,avi格式视频转yu ...

  10. LZO 使用和介绍

    LZO说明 摘要 LZO 是一个用 ANSI C 语言编写的无损压缩库.他能够提供非常快速的压缩和解压功能.解压并不需要内存的支持.即使使用非常大的压缩比例进行缓慢压缩出的数据,依然能够非常快速的解压 ...