响应式屏幕尺寸在小屏幕上播放

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;
}