移动端自适应

移动端如何做到自适应

meta 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<!-- iOS中Safari允许全屏浏览 -->
<meta name="apple-mobile-web-app-capable" content="no">
<!-- iOS中Safari顶端状态条样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="724">
<!-- 忽略将数字变为电话号码, 忽略自动识别邮箱账号 -->
<meta name="format-detection" content="telephone=no, email=no">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

阅读更多

eslint配置(vue)

eslint

为了整个团队的代码统一,我们使用了eslint

vscode如何配置

VSCode拓展插件推荐(HTML、Node、Vue、React开发均适用)

阅读更多

webpack之优化打包速度

打包结果分析

1.

1
2
webpack --profile --json > stats.json
webpack --profile --json | Out-file 'stats.json' -Encoding OEM

阅读更多

vue-cli 打包vendor大如何处理

简介

网站加载的速度取决于浏览器必须下载的所有文件的大小。减少要传输的文件的大小可以使网站不仅加载更快,而且对于那些宽带是按量计费的人来说也更友好。

gzip是一种流行的数据压缩程序。您可以使用gzip压缩Nginx实时文件。这些文件在检索时由支持它的浏览器解压缩,好处是web服务器和浏览器之间传输的数据量更小,速度更快。

阅读更多

django

python3安装

brew install python3

django安装

1
2
pip3 install django
pip3 install mysqlclient

阅读更多

linux (figlet)

Figlet

1
figlet limingxinleo

阅读更多

webpack(一)

webpack

由来:

auth:Tobias Koppers (github:@sokra)

GWT(google web Toolkit) -> 代码分隔

阅读更多

移动端user-scalable=no失效

移动端某些浏览器禁止双指缩放(user-scalable=no)失效的解决方案

做移动端开发,给页面头部添加了meta标签,并添加了user-scalable=no属性禁止双指或双击放大:

1
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">

阅读更多

linux 命令

获取当前文件夹 多少个文件

1
ls | wc -w

阅读更多

nginx 配置

Nginx

安装

MAC

1
2
brew install nginx-full --with-status --with-lua-module --with-redis2-module --with-redis2-module
brew install openresty

阅读更多