diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c5325d2fab..04d43d91d9 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -640,8 +640,8 @@ common/views/components/emoji-picker.vue:
flags: "旗"
common/views/components/settings/client-mode.vue:
- title: "クライアント"
- select-app-type: "利用するクライアントのモード"
+ title: "モード"
+ intro: "デスクトップ版とモバイル版のどちらを使うかを指定できます。"
choices:
auto: "自動で選択"
desktop: "デスクトップ版に固定"
diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 56eb59e21e..87a12e5cfa 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -35,12 +35,12 @@
const url = new URL(location.href);
//#region Detect app name
- var appType = null;
+ window.appType = null;
- if (`${url.pathname}/`.startsWith('/docs/')) appType = 'docs';
- if (`${url.pathname}/`.startsWith('/dev/')) appType = 'dev';
- if (`${url.pathname}/`.startsWith('/auth/')) appType = 'auth';
- if (`${url.pathname}/`.startsWith('/admin/')) appType = 'admin';
+ if (`${url.pathname}/`.startsWith('/docs/')) window.appType = 'docs';
+ if (`${url.pathname}/`.startsWith('/dev/')) window.appType = 'dev';
+ if (`${url.pathname}/`.startsWith('/auth/')) window.appType = 'auth';
+ if (`${url.pathname}/`.startsWith('/admin/')) window.appType = 'admin';
//#endregion
// Script version
@@ -84,7 +84,9 @@
// Detect the user agent
const ua = navigator.userAgent.toLowerCase();
- const isMobile = /mobile|iphone|ipad|android/.test(ua) || window.innerWidth < 576;
+ const isMobile = settings.device.appTypeForce === 'mobile' ||
+ (settings.device.appTypeForce !== 'desktop'
+ && (/mobile|iphone|ipad|android/.test(ua) || window.innerWidth < 576));
// Get the <head> element
const head = document.getElementsByTagName('head')[0];
@@ -103,15 +105,15 @@
}
// Switch desktop or mobile version
- if (appType == null) {
- appType = isMobile ? 'mobile' : 'desktop';
+ if (window.appType == null) {
+ window.appType = isMobile ? 'mobile' : 'desktop';
}
// Load an app script
// Note: 'async' make it possible to load the script asyncly.
// 'defer' make it possible to run the script when the dom loaded.
const script = document.createElement('script');
- script.setAttribute('src', `/assets/${appType}.${ver}.js`);
+ script.setAttribute('src', `/assets/${window.appType}.${ver}.js`);
script.setAttribute('async', 'true');
script.setAttribute('defer', 'true');
head.appendChild(script);
diff --git a/src/client/app/common/views/components/settings/app-type.vue b/src/client/app/common/views/components/settings/app-type.vue
index 533fd51517..61a23866e2 100644
--- a/src/client/app/common/views/components/settings/app-type.vue
+++ b/src/client/app/common/views/components/settings/app-type.vue
@@ -1,9 +1,10 @@
<template>
<ui-card>
- <template #title><fa :icon="faMobile"/> {{ $t('title') }}</template>
+ <template #title><fa :icon="faMobileAlt"/> {{ $t('title') }}</template>
<section class="fit-top">
- <ui-select v-model="lang" :placeholder="$t('select-app-type')">
+ <p>{{ $t('intro') }}</p>
+ <ui-select v-model="appTypeForce" :placeholder="$t('intro')">
<option v-for="x in ['auto', 'desktop', 'mobile']" :value="x" :key="x">{{ $t(`choices.${x}`) }}</option>
</ui-select>
<ui-info>Current: <i>{{ $t(currentAppType) }}</i></ui-info>
@@ -15,18 +16,16 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
-import { langs } from '../../../../config';
-import { faMobile } from '@fortawesome/free-solid-svg-icons'
+import { faMobileAlt } from '@fortawesome/free-solid-svg-icons'
export default Vue.extend({
i18n: i18n('common/views/components/settings/client-mode.vue'),
data() {
return {
- langs,
currentAppType: (window as any).appType,
- faMobile
+ faMobileAlt
};
},