【Kintone】ポータルのモバイルcssをカスタマイズする時の要素の調べ方

お世話になります。

ポータルのCSSについてモバイル版の調整をしたく、スマートフォン用のCSSファイルをアップロードしました。

例えば、以下のコードはPC用では正しく動作します。

.ocean-portal-announcement-text div img {
width:50px!important;
}

 

しかしながら、モバイル版では恐らく動的にJSがモバイル版で要素を再構築していることから同じセレクタではCSSを適用させることができません。

 

基本的な質問なのですが、どのようにしたら、CSS適用させたい要素をモバイル版で調べればよいのでしょうか?

宜しくお願い申し上げます。

 

下記がご参考になると思います。

Qiita kintone 開発で Chrome デベロッパーツールを使おう

Chrome でモバイル表示すると、DOM を調べられます。

 

コメントありがとうございます。

kintone.events.on('portal.show', function(event) {

kintone.mobile.app.record.get()  
})

では何も表示されないため、記事にあるようにアプリ詳細画面等でしかDOM構造が出力されないのではと思われます

宜しくお願い申し上げます。

誤解があるようです。

kintone.mobile.app.record.get() は、アプリ詳細画面等でレコード情報を取得する関数です。

 

「開発で Chrome デベロッパーツールを使おう」のモバイル表示のDOM操作の部分を見てください。

https://qiita.com/rex0220/items/58122efda9f94f669ec4#%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E8%A1%A8%E7%A4%BA

 

Chrome でモバイル表示のポータル画面を見る手順です。

・Chrome でポータル画面を表示

・Chrome デベロッパーツールで、モバイル表示に切り替え

・画面を再表示

・デベロッパーツールで、Elements タブを見ると DOM 構造が分かります。

 

コメントありがとうございます。

デベロッパーツールの使い方を誤解しておりました。モバイル版に切り替えても普段、DOM構造がわからないなと

思っていましたが、再表示すると切り替わるのですね。

助かりました、宜しくお願い申し上げます。