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

【问题标题】：Responsive screen size has play when on small screen响应式屏幕尺寸在小屏幕上播放
【发布时间】：2021-06-05 14:14:14
【问题描述】：

全部。

我已经阅读了很多主题，但是我陷入了僵局。

我用 React 建了一个网站，希望可以链接。

https:ishaqamin.dev

当我在移动设备上时，屏幕可以四处移动并在两侧显示为白色。

我试过了；

身高：100%
身高：100vh
minHeight: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}}>

有什么想法吗？

【问题讨论】：

标签： javascript html reactjs layout

【解决方案1】：

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

【讨论】：

谢谢，伙计。这有帮助。我仍在使用网络开发人员。主要做移动端。

【解决方案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;
}

【讨论】：