ComputerBase Menü
Aktuelles

samsung internet browser

Robert0001

Robert0001

Lt. Junior Grade
Registriert
Dez. 2017
Beiträge
452
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 ()

achja.. ich nutze google chrome auf meinem handy
 
die abstände passen nicht
Ergänzung ()

ich möchte keinen screenshot aus datenschutzgründen machen
 
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.
 
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.
 
  • Gefällt mir
Reaktionen: 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.
 
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?
 
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.
 
Zuletzt bearbeitet:
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.
 
@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 */
Zum Vergrößern anklicken....
 
Für sowas würde es eigentlich Code Tags geben.

Aber ein Beispiel du hast folgendes:

CSS: 
 padding: 2rem 1rem;

Das ist genau das was hier hier gesagt habe:

kim88 schrieb:
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.
Zum Vergrößern anklicken....

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 ()

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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

F
Keine *.mp4 Videos über WhatsApp im Browser importier+verschickbar?
Antworten
5
Aufrufe
510
BlubbsDE
BlubbsDE
polarstern
Google Chrome - Tabs synchronisieren - wie?
Antworten
2
Aufrufe
501
polarstern
polarstern
chrstu77
Wie kann ich Untertitel von aetv.com laden?
Antworten
4
Aufrufe
372
chrstu77
chrstu77
F
Kopieren aller WhatsApp Chats von einem Android smartphone auf ein anderes?
Antworten
8
Aufrufe
768
StarAce
StarAce
F
Eingebaute Android 13 Kamera erkennt QR-Code mit Speisekarte, aber keine Weiterleitung an Browser
Antworten
6
Aufrufe
1.206
ftenn2
F
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz