mobile responsive fail 響應式失敗

red010182 commented 7 years ago

vue 2.1.4 mint-ui 2.0.5

若採用全局引入

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.min.css'
Vue.use(MintUI);

出現錯誤訊息
./src/main.js
Module not found: Error: Can't resolve 'mint-ui/style.css' in '/Users/xxx/work/zzz/src'
 @ ./src/main.js 1:0-42
 @ multi main

採用按需引入

import 'mint-ui/lib/style.min.css'

import { Cell } from 'mint-ui';
import { Header } from 'mint-ui';
import { Button } from 'mint-ui';
import { DatetimePicker } from 'mint-ui';
import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);
Vue.component(DatetimePicker.name, DatetimePicker);
Vue.component(Button.name, Button);
Vue.component(Cell.name, Cell);
Vue.component(Header.name, Header);

則響應式失敗，在chrome調試(手機模式打開)或是iPhone模擬器上，看到的畫面會是

css看起來似乎也有載入，例如下圖是Cell的樣式

若把chrome調試手機模式關閉，藉由調整瀏覽器視窗，將寬度縮到320，頁面會是正常的

但是一用手機瀏覽，就完全無法responsive，根本無法正常瀏覽！各種引入都試過了，mobile樣式就是不對，也沒任何錯誤訊息。我換到Vux也出現同樣的問題，請問到底哪裡出錯了？

各種loader:

//webpack.config.js
rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /vux.src.*?js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.json$/, 
        loader: "json-loader"
        // exclude: /node_modules/
      }
    ]

//package.json
"mint-ui": "^2.0.5",
"vue": "^2.0.4"

"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"json-loader": "^0.5.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"vue-loader": "^9.7.0",
"vue-router": "^2.0.0",
"webpack": "^2.1.0-beta.25",
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-component": "^0.6.0",
"babel-preset-es2015": "^6.0.0",

ps. 下面是mint-ui-starter的畫面

mobile:

正確應該要：

ps. 極簡版html檔...還是失敗

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</head>
<body>
  <div id="app">
    <mt-cell title="Title1" value="請選擇" ></mt-cell>
    <mt-cell title="Title2" value="請選擇" ></mt-cell>
    <mt-cell title="Title3" value="請選擇" ></mt-cell>
    <mt-cell title="Title4" value="請選擇" ></mt-cell>
  </div>
</body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</html>

red010182 commented 7 years ago

降到vue2.0.2也是一樣...到底這個是怎麼辦到的？

ifredom commented 7 years ago

引用出错了呗

red010182 commented 7 years ago

解法： <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

能否在doc裡說明一下呢？我被這問題折騰了一天...

ElemeFE / mint-ui

mobile responsive fail 響應式失敗 #504