響應式屏幕尺寸在小屏幕上播放

Question

全部。

我已經閱讀了很多主題，但是我陷入了僵局。

我用 React 建了一個網站，希望可以鏈接。

https:ishaqamin.dev

當我在移動設備上時，屏幕可以四處移動並在兩側顯示白色。

我努力了;

1. 高度：100%
2. 高度：100vh
3. 最小高度：100vh

它似乎並沒有阻止它。

如果屏幕是固定的並且沒有移動，我更喜歡在移動設備上。

主屏幕設置：

    <div style={{display:'flex',flexDirection:'column' ,alignItems:'center', width:'100%', minHeight:'100vh',backgroundColor:'black', padding:20}}>
        <Paper elevation={3} style={{display:'flex',flexDirection:'column', height:'95%', width:'90%', backgroundColor:'black',padding:10}}>

有任何想法嗎？

Answer 1

你給 padding 20px 和 width: 100% just made padding 0 check now

Answer 2

使用 css 重置代碼：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}