(1)在<head>和</head>之间插入代码。
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

width - viewport的宽度 height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

 
问题:在浏览器手机模式调试时可能正常,但在真机调试上其实是不正常的。
 
 

(2)Asp.Net MVC 从第四版开始就支持移动端了。通过设置HttpContext.Cahce和HttpContext.Items来调整需要输出设别的现实模式,通过DisplayModel自动识别当前设备是PC端还是Mobile端。PC意是指电脑端,Mobile可以是安卓,塞班,苹果或者已经被淘汰的WinPhone.

当调用ViewResultBase的ExecuteResult函数寻找ViewEngineResult的时候,VirtualPathProviderViewEngine调用FindView 。

代码如下:IEnumerable<IDisplayMode> possibleDisplayModes = DisplayModeProvider.GetAvailableDisplayModesForContext(controllerContext.HttpContext, controllerContext.DisplayMode);

如果当前网页是PC端possibleDisplayModes会会被一个空的默认的DefaultDisplayMode填充,然后通过构建当前程序集标识把得到的虚拟路径存入Contexx.Cache。如果当前是移动端,通过Context.Cache搜寻到上次缓存的预留项,返回给当前视图引擎ViewEngine,最后呈现出各种设备所不同的结果。

.Net MVC的移动端原理就这么多了。看似似乎有点麻烦,由于微软高度的抽象,所有实现起来非常容易。

假如说,你当前有个控制器HomeController,里面有个Index方法。

public class HomeController : Controller
{
[HttpPost]
public ActionResult Index(Models.DemoModel DL)
{
return View();
}

[HttpGet]
public ActionResult Index()
{
return View();
}

视图的虚拟路径应该为 View/Home/Index.cshtml。

我们要做的就是在 View文件夹下面添加一个Index.Mobile.csthml页面。

所有工作至此结束了,如果你是PC端,你访问Home/Index的时候,他会自动识别和展示Index.cshtml视图,如果你访问的是移动端,他也会自动调整页面模式现实为Index.Mobile.cshtml。

注意:Mobile是关键字,不能随意更改。

如果你想要做出漂亮的手机端页面,你可以引入 JQuery Mobile类库,在Cshtml里面开发出各种绚丽的效果
 
方法2原文链接:https://blog.csdn.net/tangyanzhi1111/article/details/81588397

https://www.infoq.cn/article/Hybrid-Mobile-Apps-MVC/ 一个案例

asp.net 页面,文字自适应手机屏幕的更多相关文章

  1. 移动页面HTML5自适应手机屏幕宽度

    标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...

  2. HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  3. 》》HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  4. 移动端H5页面自适应手机屏幕宽度

    1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...

  5. web页面自适应手机屏幕宽度

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  6. flexible.js在华某为手机上使用rem时,页面宽度超出手机屏幕宽度

    问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...

  7. WAP网站WML或HTML页面自适应手机屏幕实现方法

     把图片和div的宽度都设置成:width:100%就可以了

  8. 使PC端网页宽度自适应手机屏幕大小

    有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...

  9. 移动端页面按手机屏幕分辨率自动缩放的js

    <script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.scr ...

随机推荐

  1. 为了省钱,我用1天时间把PHP学了!

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 你在通往架构师的路上吗? 程序员这个行业就像是在不断的打怪升级,突破每一阶段的瓶颈期 ...

  2. linux 内核参数设置 - sysctl

    sysctl 命令用于查看和修改内核参数 查看指定参数: sysctl kernel.threads-max 查看所有参数: sysctl -a 修改指定参数: sysctl -w kernel.th ...

  3. es6深层次数组深拷贝

    let arr = [       {         label: '1',         children: [1, 2]       }     ] let a = [{...arr[0]}] ...

  4. shell脚本算术运算

    自增自减操作 用let命令可以实现自增自减的命令,不需要$符号: #!/bin/bash set -e n=100 let n++ echo $n 还可以实现自增自减指定的值: #!/bin/bash ...

  5. 【C语言高级编程】你见过长度为0的数组吗?管你信不信,看就完了!

    一.什么是零长度数组 零长度数组就是长度为0的数组. ANSI C 标准规定:定义一个数组时,数组的长度必须是一个常数,即数组的长度在编译的时候是确定的.在ANSI C 中定义一个数组的方法如下: 类 ...

  6. 【图论】USACO07NOV Cow Relays G

    题目大意 洛谷链接 给定一张\(T\)条边的无向连通图,求从\(S\)到\(E\)经过\(N\)条边的最短路长度. 输入格式 第一行四个正整数\(N,T,S,E\),意义如题面所示. 接下来\(T\) ...

  7. linux(centos8):prometheus使用alertmanager发送报警邮件(prometheus 2.18.1/alertmanager 0.20.0)

    一,alertmanager的用途 1,Alertmanager的作用: Alertmanager是一个独立的报警模块, 它接收Prometheus等客户端发来的警报,并通过分组.删除重复等处理, 通 ...

  8. 第六章 Linux系统之文件管理

    一.文件管理概述 1.对文件做些什么? 谈到Linux文件管理,首先我们需要了解的就是,我们要对文件做些什么事情? 其实无非就是对一个文件进行创建.复制.移动.查看.编辑.压缩.查找.删除等等 2.内 ...

  9. C# 清除文本中的HTML标签

    /// <summary>          /// 清除文本中Html的标签          /// </summary>          /// <param n ...

  10. 洛谷 p6858 深海少女与胖头鱼 洛谷月赛 期望dp

    洛谷10月月赛 2 t2 深海少女与胖头鱼 题目链接 参考资料:洛谷10月赛2讲评ppt; 本篇题解考完那天就开始写,断断续续写到今天才写完 本题作为基础的期望dp题,用来学习期望dp还是很不错的 ( ...