WebViewコンポーネントにcontentMode="mobile"を追加し、表示を最適化

GeneralWebView.tsx

@@ -33,6 +33,7 @@ export default ({ route }) => {
     <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <WebView
         source={{ uri }}
+        contentMode="mobile"
         allowsBackForwardNavigationGestures
         ref={webViewRef}
         onNavigationStateChange={(navState) => {

components/Apps/WebView.tsx

@@ -162,6 +162,7 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
       javaScriptEnabled
       allowsBackForwardNavigationGestures
       setSupportMultipleWindows
+      contentMode="mobile"
       style={{ backgroundColor: bgColor }}
       {...{ onMessage, onNavigationStateChange, onLoadEnd }}
       injectedJavaScript={injectJavascript}

components/news.tsx

@@ -14,6 +14,7 @@ const News: FC = () => {
     <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <WebView
         useWebKit={true}
+        contentMode="mobile"
         source={{
           uri: `https://xprocess.haruk.in/${news}`,
         }}

components/trainbaseview.tsx

@@ -26,6 +26,7 @@ export default function TrainBase({ route }) {
       {Platform.OS == "ios" && <StatusBar barStyle="dark-content" />}
       <WebView
         useWebKit
+        contentMode="mobile"
         source={{ uri: "https://train.jr-shikoku.co.jp/" + info }}
         originWhitelist={[
           "https://train.jr-shikoku.co.jp",

howto.tsx

@@ -34,6 +34,7 @@ export default ({ navigation: { navigate }, route }: Props) => {
     <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <WebView
         useWebKit
+        contentMode="mobile"
         source={{ uri: info.replace("http://", "https://") }}
       />
       <BigButton onPress={onExit} string="閉じる" />

lib/webViewInjectjavascript.ts

@@ -909,8 +909,9 @@ const setNewTrainItem = (element,hasProblem,type)=>{
   element.style.display = 'flex';
   element.style.alignItems = 'center';
   element.style.justifyContent = 'center';
-  element.style.width = '4.5em';
-  element.style.maxWidth = 'calc(38vw / 2 - 6px)';
+  element.style.width = '56px';
+  element.style.maxWidth = '56px';
+  element.style.flexShrink = '0';
   element.style.minHeight = '80px';
   element.style.height = '100%';
   element.getElementsByTagName("img")[0].style.float = 'unset';
@@ -933,6 +934,14 @@ const setNewTrainItem = (element,hasProblem,type)=>{
     //列番付与
 const setStrings = () =>{
   try {
+    // viewport meta tagを強制設定（iPad Stage Manager等でのズーム防止）
+    var _vpMeta = document.querySelector('meta[name="viewport"]');
+    if (!_vpMeta) {
+      _vpMeta = document.createElement('meta');
+      _vpMeta.name = 'viewport';
+      document.head.appendChild(_vpMeta);
+    }
+    _vpMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
     const elements = document.querySelectorAll('#disp > div > div > div[onclick]');
     const setNewTrainItemUI = ()=>{
       const aaa = (x2,pos) => {
@@ -1190,8 +1199,8 @@ const setStrings = () =>{
       document.querySelector('#pMENU_3').style.backgroundColor=_t.bgSec;
       document.querySelectorAll('#pMENU_2 div').forEach((d)=>d.style.padding = '10px'); 
       document.querySelectorAll('#pMENU_3 div').forEach((d)=>d.style.padding = '10px'); 
-      document.querySelectorAll('#topHeader div').forEach((d)=>d.style.width = '100vw'); 
-      document.querySelectorAll('#disp div')[0].style.width = '100vw'; 
+      document.querySelectorAll('#topHeader div').forEach((d)=>d.style.width = '100vw');
+      document.querySelectorAll('#disp div')[0].style.width = '100vw';
       document.getElementById('disp').style.width = '100vw';
       document.getElementById('disp').style.overflowX = 'hidden';
 

ndView.tsx

@@ -141,6 +141,7 @@ setInterval(() => {
         source={{ uri: "https://www.jr-shikoku.co.jp/info/" }}
         originWhitelist={["https://www.jr-shikoku.co.jp"]}
         mixedContentMode={"compatibility"}
+        contentMode="mobile"
         javaScriptEnabled={true}
         injectedJavaScript={jsa}
         pullToRefreshEnabled

targets/widget/DelayInfoWidget.swift

@@ -104,16 +104,27 @@ struct DelayInfoWidgetView: View {
             } else {
                 VStack(alignment: .leading, spacing: 4) {
                     ForEach(entry.items) { item in
-                        HStack {
+                        HStack(spacing: 8) {
                             Text(item.line)
                                 .font(.subheadline)
+                                .lineLimit(1)
+                                .truncationMode(.tail)
+                                .minimumScaleFactor(0.9)
                                 .frame(maxWidth: .infinity, alignment: .leading)
+                                .layoutPriority(1)
                             Text(item.minutes)
                                 .font(.subheadline)
-                                .frame(width: 50)
+                                .lineLimit(1)
+                                .fixedSize(horizontal: true, vertical: false)
+                                .frame(minWidth: 48, idealWidth: 52, maxWidth: 56, alignment: .trailing)
+                                .layoutPriority(2)
                             Text(item.direction)
                                 .font(.subheadline)
-                                .frame(width: 40)
+                                .lineLimit(1)
+                                .minimumScaleFactor(0.8)
+                                .allowsTightening(true)
+                                .frame(minWidth: 56, idealWidth: 64, maxWidth: 76, alignment: .trailing)
+                                .layoutPriority(3)
                         }
                         .padding(.horizontal, 10)
                         .padding(.vertical, 2)
@@ -121,6 +132,17 @@ struct DelayInfoWidgetView: View {
                 }
                 .padding(.top, 4)
                 .frame(maxHeight: .infinity, alignment: .top)
+                .mask(
+                    LinearGradient(
+                        gradient: Gradient(stops: [
+                            .init(color: .white, location: 0),
+                            .init(color: .white, location: 0.86),
+                            .init(color: .clear, location: 1)
+                        ]),
+                        startPoint: .top,
+                        endPoint: .bottom
+                    )
+                )
             }
         }
         .containerBackground(for: .widget) {