samsung internet browser

[Robert0001]

hi,

auf einem samsung smartphone mit dem samsung browser schaut die webseite anders aus..
ich selbst nutze ein oppo smartphone
beide sind ja bekanntlich android

jedoch schaut die webseite anders aus.. warum?

Ergänzung (8. Dezember 2022)

achja.. ich nutze google chrome auf meinem handy

 

[Incanus]

Vermutlich ist auf dem Oppo nicht der Samsung Browser benutzbar.

 

[Der Lord]

die webseite

welche denn? o_O

und definiere: anders ausschauen. farben? anordnung? gibt's evtl screenshots?

 

[M-X]

Weil nicht das OS entscheidet wie die Seite außssieht (welche überhaupt?) sondern wenn dann Primär der Borwser und dazu Faktoren wie User Agent und Auflösung.

 

[Robert0001]

die abstände passen nicht

Ergänzung (8. Dezember 2022)

ich möchte keinen screenshot aus datenschutzgründen machen

 

[crustenscharbap]

Anderer Browser = Webseite sieht anders aus. Es reicht schon wenn die Schrift nicht vorhanden ist.
Es reicht ja schon wenn man am PC die Webseite unter Linux öffnet.

Nachtrag: Weil du Abstände sagst. Zum einen kann es sein dass bei einen Browser der Desktop-Modus an ist. (Desktop-Webseite oder PC-Version anzeigen)
Der eher wahrscheinlichere Grund ist die DPI Einstellung im Android. Dies erfährt die Webseite und passt sich an. Also wenn du die DPI z.B. auf 600 stellst bzw die Anzeigegröße auf winzig stellst, wird Computerbase die Tablet-Webseite ausspucken. Stellst du die DPI also Anzeigegröße groß (z.B. auf 300), dann bekommst du Alles riesig angezeigt.
Das betrifft 95% der Webseiten.

 

[Mr. Black]

Samsung Internet ist auch für andere Geräte verfügbar und sollte auf dem Oppo im Play Store zu finden sein, wenn dieser besser gefällt.

 

[Robert0001]

ich programmiere gerade meine webseite in html, css
und auf dem standardbrowser von samsung sieht meine homepage anders aus und die paddings usw. passen nicht.. die abstände sind nicht korrekt.

 

[Incanus]

Das haben wir verstanden, es wurde ja auch schon erklärt, warum das anders aussehen kann. Was genau möchtest Du denn jetzt noch hören?

 

[cruse]

Willkommen in der Webentwicklung!

Seit es Scripts und Browsererkennung gibt, wird die dazu benutzt um CSS etc. an die unterschiedlichen Browser anzupassen.
Das Problem von dir hatten vor dir schon Millionen von Menschen, die Websites entwickelt haben oder es noch tun.
Ist eigentlich der erste große Stolperstein auf den man trifft.

Samsung Browser und Chrome benutzen übrigens beide die selbe Engine, sollte nicht allzu schwierig sein, dass auf ein Level zu heben.
Da du leider nix konkretes postest, können wir dir auch nicht wirklich weiterhelfen.

 

[kim88]

Und noch als Hinweis: Wenn du Abstände und Paddings n relativen Formaten (z.b. REM) eingibst, beeinflusst z.b. die eingestellte Schriftgrösse vom OS die Abständ.

Ohne Link oder wenigstens ein bisschen Code können wir dir hier aber nicht mehr sagen.

 

[Robert0001]

@font-face {
font-family: "Courier Prime";
src: url("../font/CourierPrime-Bold.woff2") format("woff2"),
url("../font/CourierPrime-Bold.woff") format("woff"),
url("../font/CourierPrime-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Courier Prime";
src: url("../font/CourierPrime-Italic.woff2") format("woff2"),
url("../font/CourierPrime-Italic.woff") format("woff"),
url("../font/CourierPrime-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Courier Prime";
src: url("../font/CourierPrime-BoldItalic.woff2") format("woff2"),
url("../font/CourierPrime-BoldItalic.woff") format("woff"),
url("../font/CourierPrime-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Courier Prime";
src: url("../font/CourierPrime-Regular.woff2") format("woff2"),
url("../font/CourierPrime-Regular.woff") format("woff"),
url("../font/CourierPrime-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--display: #fff;
--font: #000;
}
*,
::after,
::before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body,
html {
font-family: "Courier Prime", sans-serif;
background-color: var(--display);
color: var(--font);
}
/* BUTTON */
button {
background-color: #000;
padding: 1rem 2rem;
border: 2px solid #000;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
-webkit-animation: vibrate-1 1.5s linear infinite both;
animation: vibrate-1 1.5s linear infinite both;
}
@-webkit-keyframes vibrate-1 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
20% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
40% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
60% {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
80% {
-webkit-transform: translate(2px, -2px);
transform: translate(2px, -2px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
@keyframes vibrate-1 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
20% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
40% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
60% {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
80% {
-webkit-transform: translate(2px, -2px);
transform: translate(2px, -2px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
button a {
text-decoration: none;
color: #fff;
font-size: 1rem;
font-weight: bold;
}
small {
font-size: 15px;
}
h1 {
font-size: 3rem;
letter-spacing: -0.06em;
margin: 1rem 0;
}
h2 {
font-size: 2em;
letter-spacing: -0.06em;
margin-bottom: 1rem;
}
h3 {
font-size: 1.5em;
letter-spacing: -0.06em;
}
p,
li {
font-size: 16px;
line-height: 1.3;
position: relative;
list-style: none;
}
li {
position: relative;
padding: 0.2rem 0 0.2rem 2em;
}
li::before {
content: "\2713";
position: absolute;
width: 20px;
height: 20px;
margin-left: -2em;
color: lightgreen;
font-weight: bold;
}
section {
margin: 5rem 0;
}
.container {
display: flex;
flex-basis: 100%;
flex-wrap: wrap;
gap: 0 5rem;
margin: 0 auto;
padding: 1rem;
max-width: 1400px;
}
.container div {
flex: 1 1 0;
}
/* animated arrow header page */
.arrow {
position: absolute;
top: 60vh;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.arrow span {
display: block;
width: 30px;
height: 30px;
border-bottom: 5px solid #000;
border-right: 5px solid #000;
transform: rotate(45deg);
margin: -10px;
animation: scroll 2s infinite;
}
.arrow span:nth-child(2) {
animation-delay: -0.2s;
}
.arrow span:nth-child(3) {
animation-delay: -0.4s;
}
@keyframes scroll {
0% {
opacity: 0;
transform: rotate(45deg) translate(-20px, -20px);
}
50% {
opacity: 1;
transform: rotate(45deg) translate(-20px, -20px);
}
100% {
opacity: 0;
transform: rotate(45deg) translate(20px, 20px);
}
}
/* animated arrow header page end */
/* MEDIA SCREEN 1000px */
@media screen and (max-width: 1000px) {
.container {
display: flex;
flex-basis: 100%;
flex-wrap: wrap;
}
.container div {
flex: 1 1 100%;
}
.header-center h1 {
font-size: 2.5rem;
}
.header-center h1 span {
font-size: 2.5rem;
}
section {
margin: 3rem 0;
}
.imghtml img {
padding: 2rem;
}
.arrow {
display: none;
}
}
/* TOPBAR */
/* .topbar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
float: inline-end;
padding: 1rem 1rem;
background-color: #ccc;
} */
/* NAVIGATION */
.navbar {
width: 100%;
background-color: #000;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 62px;
max-width: 1520px;
margin: 0 auto;
z-index: 9999;
}
.navbar .menu-items {
display: flex;
}
/* .navbar .nav-container li {
list-style: none;
} */
.navbar .nav-container a {
text-decoration: none;
color: #fff;
font-weight: 500;
font-size: 1.2rem;
padding: 0.7rem;
}
.navbar .nav-container a:hover {
font-weight: bolder;
}
.nav-container {
display: block;
position: relative;
height: 60px;
}
.nav-container .checkbox {
position: absolute;
display: block;
height: 32px;
width: 32px;
top: 20px;
right: 20px;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.nav-container .hamburger-lines {
display: block;
height: 26px;
width: 32px;
position: absolute;
top: 17px;
right: 20px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-container .hamburger-lines .line {
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: #fff;
}
.nav-container .hamburger-lines .line1 {
transform-origin: 0% 0%;
transition: transform 0.4s ease-in-out;
}
.nav-container .hamburger-lines .line2 {
transition: transform 0.2s ease-in-out;
}
.nav-container .hamburger-lines .line3 {
transform-origin: 0% 100%;
transition: transform 0.4s ease-in-out;
}
.navbar .menu-items {
background-color: #000;
height: 100vh;
width: 100%;
transform: translate(-150%);
display: flex;
flex-direction: column;
padding-top: 10rem;
margin-right: -40px;
transition: transform 0.5s ease-in-out;
text-align: center;
list-style: none;
}
.navbar .menu-items p {
margin-bottom: 1.2rem;
font-size: 2em;
font-weight: 500;
list-style: none;
}
.logo {
position: absolute;
top: 5px;
left: 15px;
font-size: 1.5rem;
color: #fff;
}
.logo > span {
font-size: 1rem;
}
.nav-container input[type="checkbox"]:checked ~ .menu-items {
transform: translateX(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
transform: rotate(45deg);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
transform: scaleY(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
transform: rotate(-45deg);
}
.nav-container input[type="checkbox"]:checked ~ .logo {
display: none;
}
/* HEADER */
header {
background: radial-gradient(
rgba(0, 0, 0, 0.1),
rgba(255, 255, 255, 1),
rgb(255, 255, 255)
);
height: 70vh;
display: flex;
align-items: center;
text-align: center;
padding: 0 1rem;
}
.header-center {
max-width: 50rem;
margin: 0 auto;
}
h1 span {
font-size: 3rem;
position: relative;
z-index: 999;
}
h1 span:nth-child(1)::after {
content: "";
position: absolute;
background-color: lightgreen;
top: 35px;
left: 0;
width: 100%;
height: 15px;
z-index: -1;
}
h1 span:nth-child(2)::after {
content: "";
position: absolute;
background-color: lightgreen;
top: 35px;
left: 0;
width: 100%;
height: 15px;
z-index: -1;
}
.text-focus-in {
-webkit-animation: text-focus-in 2s cubic-bezier(0.55, 0.085, 0.68, 0.53)
both;
animation: text-focus-in 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
/* 1# Abschnitt */
.bg-black {
background-color: #000;
color: #fff;
width: 100%;
padding: 2rem 2rem;
}
.images {
display: flex;
justify-content: center;
}
.images img {
max-width: 100%;
height: 100%;
}
.bg-black .container {
display: flex;
}
.bg-black small {
color: lightgreen;
}
h2 span {
font-size: 2rem;
position: relative;
z-index: 999;
}
h2 span::before {
content: "";
position: absolute;
background-color: lightgreen;
top: 20px;
left: 0;
width: 100%;
height: 12px;
z-index: -1;
}
/* 2# Abschnitt */
.imghtml {
display: flex;
justify-content: center;
height: 30vh;
}
.imghtml img {
max-width: 100%;
height: 100%;
-webkit-animation: image 3s ease-in-out infinite both;
animation: image 3s ease-in-out infinite both;
}
@keyframes image {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
/* 4# Abschnitt */
.boxen {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.networkicon {
width: 60%;
height: 60%;
-webkit-animation: rotate-vert-center 4s
cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s infinite alternate-reverse
both;
animation: rotate-vert-center 4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s
infinite alternate-reverse both;
}
@keyframes rotate-vert-center {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes rotate-vert-center {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
.box {
display: flex;
flex-direction: column;
text-align: center;
margin: 0 1rem;
}
.box img {
width: 80px;
height: 80px;
padding: 1rem;
margin: 0 auto;
}
.box p:first-of-type {
background-color: #000;
color: lightgreen;
font-size: 22px;
margin-bottom: 0.5rem;
padding: 0.2rem;
width: 100%;
}
/* 5# Abschnitt */
.bg-grey {
background: linear-gradient(rgba(255, 255, 255, 0), rgba(231, 231, 231, 1));
color: #000;
width: 100%;
padding: 1rem 2rem;
}
/* 6# Abschnitt */
.container-center {
display: flex;
justify-content: center;
text-align: center;
flex-wrap: wrap;
}
.preise {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 1rem;
}
.preisbox {
padding: 1rem;
margin: 0.5rem;
background: #000;
color: #fff;
position: relative;
display: flex;
flex-direction: column;
align-content: flex-end;
height: fit-content;
}
.preisbox p:first-child {
color: lightgreen;
font-weight: bold;
font-size: 1.5rem;
border-bottom: #fff dashed 1px;
}
.preisbox p span {
color: #fff;
}
.preisbox ul {
margin: 1rem 0;
}
.preisbox li {
line-height: 1;
text-align: start;
}
.preisbox div {
color: #fff;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.preisbox .unlimited {
font-size: 1.2rem;
}
/* ========= FOOTER ========== */
footer {
background-color: #000;
color: #fff;
padding: 2rem 1rem;
}
.footer-content {
max-width: 1400px;
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.footer-center {
text-align: end;
}
.footer-center a {
text-decoration: none;
color: #fff;
}
.footer-content div {
flex: 1 1 1;
width: 33%;
}
.footer-copy {
text-align: center;
text-decoration: none;
color: #fff;
}
/* ========= FOOTER ========== end */

 

[kim88]

Für sowas würde es eigentlich Code Tags geben.

Aber ein Beispiel du hast folgendes:

 padding: 2rem 1rem;

Das ist genau das was hier hier gesagt habe:

Und noch als Hinweis: Wenn du Abstände und Paddings in relativen Formaten (z.b. REM) eingibst, beeinflusst z.b. die eingestellte Schriftgrösse vom OS die Abstände.

Du kannst in jedem Browser, bzw auf Android oder iOS irgendwo in den Systemeinstellungen die Standardschriftgrösse aktivieren.

In der Regel ist die bei 16px.

Daher 1rem = Standardschriftgrösse von Browser / Betriebssystem.
Wenn nun auf einem Handy die Standardschriftgrösse 18px und auf dem anderen 16px ist hast mit der Angabe von "padding: 2rem;" einmal ein Padding von 36px und einmal von 32px.

Ergänzung (8. Dezember 2022)

Abstände und Paddings würde ich persönlich immer in absoluten Werten z.b. effektiv in Pixel also z.b. padding: 25px; angeben und nich in REM.

REM ist super für schriften, da so Leute mit einer Sehschwäche die in der Regel die Schriften grösser eingestellt haben, auf der Webseite ebenfalls direkt eine grössere Schrift haben.

 

[floq0r]

em is super wenn man sizes hierarchisch aufbauen möchte. Am parent einfach die font-size ändern und em zieht mit