Mobile (App/Web) image size
Follow
In the case of
mobile
(App, Mobile Web), unlike PC Web
, the ratio and size are fixed
.
The proportions and sizes according to the layout are as follows.
division | Vertical (px) | Horizontal (px) | Volume | File type |
full screen (image) |
540*960~1080*1920
(9:16 ratio) |
960*540~1920*1080
(16:9 ratio) |
1M or less (URL method: 5M or less) |
png, jpg, jpeg |
Full screen (scroll) |
540~1080 No height limit
(9:16 ratio or vertically long ratio) |
540~1080 No height limit
(1:1 ratio or vertically long ratio) |
||
Full screen (image + text) |
540*480~1080*960
(9:8 ratio) |
960*270~1920*540
(32:9 ratio) |
||
modal (image) |
600*600~1200*1800
(1:1, 2:3 ratio recommended) |
600*600~1800*1200
(1:1, 3:2 ratio recommended) |
||
Modal (image + text) |
725*250~1450*500
(29:10 ratio) |
|
||
Sticky Banner (Image + Text) |
50*50~150*150
(1:1 ratio) |
|
1.full screen
Full screen displays a message that fills the entire device screen.
image
Full screen images maintain the uploaded image ratio.
Because it unconditionally fills the device screen, some of the original image may be cut off horizontally or vertically depending on the device. notionvc:90f9111b-7f37-4a56-bcf3-9e78e0872de9
[[Quote:Warning:Medium]]
Note
In case of full screen, the image may be cut off on tablets and Galaxy Fold (when unfolded).
If you want to support this device, we recommend using a full-screen (scroll) layout.
Image > When the [Enable scrolling] function is activated
If you turn on the function to enable scrolling for full-screen images, you can upload images with a 9:16 ratio or a vertically long ratio.
At this time, if you turn on the full screen scroll function, the image width will be adjusted to the device width, so you can even respond to situations where it is cut off on certain devices.
image+text
Full screen image + text fills the entire device screen, with the image filling 50% of the screen.
At this time, the image area is unconditionally filled while maintaining the uploaded image ratio.
Depending on the device, part of the original image may be cut off horizontally or vertically.
2. modal
Modals leave space on the device screen and display a message in the center.
modal image
For modal images, the rate at which you upload them determines how your message is displayed.
Modal image min and max height
- min-height: width of modal (device width * 0.85)
-
Maximum height: Image is exposed as is if it does not exceed 85% of the screen
- If the height exceeds 85% of the screen, the width value is adjusted to 85% of the screen based on the height.
Modal image+text
For modal image+text, the image upload rate within the message is fixed.
Modal image+text min and max height
- min-height: width of modal (device width * 0.85)
- max height: width of modal * 1.5 (device width * 0.85 * 1.5)
modal text
For modal text, the modal width is fixed to 85% of the device.
Modal text min and max height
- min-height: width of modal (device width * 0.85)
- max height: width of modal * 1.5 (device width * 0.85 * 1.5)
3. Sticky banner (web not supported)
A sticky banner displays a message at the top or bottom of the screen. At this time, up to three lines of text are displayed on the screen without a title.
- Sticky banner images fit into a square container without the image being cropped.