zoukankan      html  css  js  c++  java
  • asp.net 页面,文字自适应手机屏幕

    (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/ 一个案例

  • 相关阅读:
    PIE SDK介绍
    PIE软件介绍
    PIE SDK与Python结合说明文档
    转载博客(Django2.0集成xadmin管理后台遇到的错误)
    python+django学习二
    python+django学习一
    HTML练习二--动态加载轮播图片
    HTML练习一
    LeetCode 999. 车的可用捕获量
    LeetCode 892. 三维形体的表面积
  • 原文地址:https://www.cnblogs.com/jchhh912/p/12486091.html
Copyright © 2011-2022 走看看