一个有用的手机页面模版

C#版：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="m_index.aspx.cs" Inherits="m_index" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="apple-mobile-web-app-c  apable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>测试</title>

</head>
<body>
    <form id="form1" runat="server">
      <div style="margin: 0px; padding: 5px; border: 1px solid rgb(204, 204, 204); max-width: 100%; font-size: 16.363636016845703px; font-family: 宋体; line-height: 26.666667938232422px;  word-wrap: break-word !important; box-sizing: border-box !important;">
          <p>在这里添加你的代码</p>
     </div>
    </form>
</body>
</html>

HTML版：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="apple-mobile-web-app-c  apable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />   <meta name="format-detection" content="telephone=no" />   

<title>测试</title>
</head>

<body >
<div style="margin: 0px; padding: 5px; border: 1px solid rgb(204, 204, 204); max-width: 100%; font-size: 16.363636016845703px; font-family: 宋体; line-height: 26.666667938232422px; background-color: rgb(248, 247, 245); word-wrap: break-word !important; box-sizing: border-box !important;">

<p>这里开始添加你的代码</p>

</div>
</body>
</html>

参考资料:百度经验-不落泪的天使

时间： 2024-12-28 20:39:26

一个有用的手机页面模版的相关文章

用jQuery Mobile搭建一个简单的手机页面

1.新增html页面. 2.声明html5Document. 3.载入jQuery Mobile Css.jQuery与jQuery Mobile链接库. 4.使用jQuery Mobile定义的html标准.编写网页架构及内容. 向网页中添加jQuery Mobile,添加方法如下: 从CDN引用jQuery Mobile(推荐) <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jque

用电脑调试手机页面

Weinre(WEb INspector REmote)是一个页面调试工具,主要用于远程调试.对于调试手机设备上的页面来说,Weinre是非常有用的. 我们需要一些步骤让Weinre运行起来,首先我们需要安装node.js,Weinre将会运行在node.js上,下一步我们将会安装 node package manager(npm),最后,我们将会安装Weinre. 第一步: 为了得到node.js,最简单的方式是下载windows installer.因为windows installer已经

手机页面中的meta标签

以前看书的时候,觉得meta标签就只有一个charset对于我来说是有用的.前段时间有个学弟让我写个手机版的网页,我才知道原来meta标签有那么多学问. meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制

解决ios手机页面overflow scroll滑动很卡的问题

解决ios手机页面overflow scroll滑动很卡的问题今天在IOS系统上测试 webAPPApp的时候发现使用了position:fixed/absolute时,DIV容器里面下滑动没有像普通页面一样顺畅,手滑到哪就停到哪.感觉很卡一样,而安卓效果正常,算是一个bug.终于在网上找到了一个解决方法. -webkit-overflow-scrolling:touch; 加上去后果然有用,也就是说DIV容器使用的定位属性引起的.当时效果是弹出一个层,body无滚动条,但是弹出层需要可以上下

响应式：为什么百度、淘宝之类的大公司网页不使用响应式，而是独立开发一套手机页面？

响应式设计不是万能的,它有一定的好处,但也有一定的弊端.先给出结论:如果开发资源充裕,不应该考虑使用响应式设计来同时支持移动端和桌面端. 因为响应式最大的优点就是开发快.打个比方,移动端和桌面端的开发时间分别是 t,采用响应式设计写一个同时支持两者的网站可能只有 1.2t. 那为什么开发资源充足的情况下,不应该采取响应式设计来同时支持移动端和桌面端呢? 1. 响应式设计带来大量冗余代码.在移动端充斥着 webkit 内核的浏览器的时代,响应式设计的网站中却不得不带有大量兼容旧 IE 的代码.移动

移动互联，手机页面设计

1.手机上网的过程普通浏览器上网过程浏览器<--->Web服务器手机上网过程手机<--->WAP网关(UP.Link Server)<--->集成HDML,WML的Web服务器 * UP指Unwired Planet公司,其UP.Phone浏览器为手机浏览器的事实标准,以下内容都基于该标准. *普通web页面用HTML描述,目前手机页面可以用HDML和WML两种语言来描述,它们本质上是用XML 1.0来定义的.本文主要讲述HDML,由于其和HTML有相似,

关于手机页面字体大小的问题

从我第一天写手机页面的时候一直困扰我的问题有两个一个是自适应字体的大小,一个是自适应页面的高度.我想接到一个手机的页面任务大部分人都会碰到这种问题我这介绍一种实现的办法媒体查询不说别的直接贴代码 <!doctype html><html><head><meta charset="utf-8"><title>手机页面</title><meta name="viewport" c

学习手机页面制作4

学习手机页面制作-制作固定-流式-固定的布局制作左右固定宽度中间自适应的页面布局具体的页面效果可以http://m.juhuasuan.com/m/index.htm 的头部导航传统的布局方式使用定位的方式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>固定比例固定</title&

学习制作手机页面2

学习制作手机页面2. 先介绍一个css3的属性.box-sizing 这个属性就是把盒模型的border 和padding 都计算在内未使用box-sizing的代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>box-sizing</title> 6 7 <style&