• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sprungmarken funktionieren in iOS 8 Mail nicht

Chronos

Aktives Mitglied
Hallo Forum,

ich bin dabei einen Newsletter zu erstellen der ein paar Übersichtslinks hat über die man zu entsprechenden Themen in der Mail / dem Newsletter springen kann - also nicht wirklich etwas besonderes.

Es gibt einen Link mit dem Ziel einer ID.
Das Problem ist jetzt das diese Sprungmarken/Anchors unter iOS 8 im Standard Mail-Client nicht mehr funktionieren.
Ich glaube auch nicht, dass ich da viel tun kann, JavaScript geht ja eh nicht in Clients bzw. würde geblockt und eine andere Möglichkeit statt "id" nun "name" zu nehmen gibt es ja nicht. Gelesen habe ich nur dass z. B. in GMail noch ein Span um den Link hilft.

Wenn man danach sucht, findet man auch nur Beiträge die ins nichts führen wie z. B.:
https://discussions.apple.com/thread/6548063

Hab hier mal meine kleine Testseite falls es jemand probieren möchte:
http://jsfiddle.net/je74tb6y/

Der Inhalt ist natürlich quatsch aber es erfüllt seinen Zweck :p
Falls jemand noch eine Idee hat und mir helfen kann wäre ich sehr dankbar :)

HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Newsletter Demo</title>       
        <style type="text/css">           
            a {
                font: 16pt Arial, sans-serif;
                text-decoration: none;
            }
           
            a.based-link {
                display: block;
                margin-bottom: 100px;
                width: 480px;
                padding: 20px 0;
                background: gray;
            }
           
            .doge-ipsum {
              font-size: 14pt; 
            }           
           
            .much-space-so-wow {
                margin-bottom: 900px;
            }
        </style>
    </head>
    <body>
        <a href="#anchorone" class="based-link">
            <span>Menü 1</span>       
        </a>

       
        <img src="http://placehold.it/1080x960" alt="placeholder 1">
        <pre class="doge-ipsum">
            wow.
             lorem ipsum.
            such HTML.    such generator.
   much HTML.       lorem generator.
   lorem dogescript.          so placeholder.
            very text.          so layout.
      such graphic.          so github.
       very typography.             many javascript.
     much generator.          lorem ipsum.
            many text.         very javascript.
  very graphic.   much placeholder.
     such github.       so HTML.
   so typography.          so layout.
       many github.           much generator.
     lorem layout.       much text.
  much placeholder.             so text.
  lorem doge.           so dogescript.
           so filler.   very doge.
         much github.         very typography.
     many generator.        such filler.
   so placeholder.          many graphic.
            such CSS.    much javascript.
         so dogescript.       lorem doge.
            many doge.     very doge.
         so typography.    many layout.
         such doge.   such github.
    lorem layout.          many HTML.
   much placeholder.         such doge.
    such ipsum.         so typography.
  many dogescript.      such ipsum.
             such CSS.       very filler.
     such dogescript.       much doge.
           very dogescript.            lorem doge.
            many graphic.   such graphic.
           such text.     many github.
       much javascript.             such dogescript.
        much javascript.         much javascript.
        much typography.         so javascript.
     much dogescript.        so filler.
   so layout.           much filler.
    very github.      much CSS.
         many placeholder.   much generator.
         much doge.    lorem CSS.
      many placeholder.         lorem doge.
         such javascript.  very dogescript.
            so CSS.           many layout.
    much ipsum.             many typography.
           very filler.    much placeholder.
          many doge.     very placeholder.
   such generator.      lorem javascript.
  much HTML.        lorem filler.
            many typography.
       
        </pre>
                      
        <a id="anchorone" class="based-link much-space-so-wow">Anchor</a>
       
        <pre class="doge-ipsum">
            wow.
             lorem ipsum.
            such HTML.    such generator.
   much HTML.       lorem generator.
   lorem dogescript.          so placeholder.
            very text.          so layout.
      such graphic.          so github.
       very typography.             many javascript.
     much generator.          lorem ipsum.
            many text.         very javascript.
  very graphic.   much placeholder.
     such github.       so HTML.
   so typography.          so layout.
       many github.           much generator.
     lorem layout.       much text.
  much placeholder.             so text.
  lorem doge.           so dogescript.
           so filler.   very doge.
         much github.         very typography.
     many generator.        such filler.
   so placeholder.          many graphic.
            such CSS.    much javascript.
         so dogescript.       lorem doge.
            many doge.     very doge.
         so typography.    many layout.
         such doge.   such github.
    lorem layout.          many HTML.
   much placeholder.         such doge.
    such ipsum.         so typography.
  many dogescript.      such ipsum.
             such CSS.       very filler.
     such dogescript.       much doge.
           very dogescript.            lorem doge.
            many graphic.   such graphic.
           such text.     many github.
       much javascript.             such dogescript.
        much javascript.         much javascript.
        much typography.         so javascript.
     much dogescript.        so filler.
   so layout.           much filler.
    very github.      much CSS.
         many placeholder.   much generator.
         much doge.    lorem CSS.
      many placeholder.         lorem doge.
         such javascript.  very dogescript.
            so CSS.           many layout.
    much ipsum.             many typography.
           very filler.    much placeholder.
          many doge.     very placeholder.
   such generator.      lorem javascript.
  much HTML.        lorem filler.
            many typography.
       
        </pre>
    </body>
</html>
 
Werbung:
Hallo Forum,

ich bin dabei einen Newsletter zu erstellen der ein paar Übersichtslinks hat über die man zu entsprechenden Themen in der Mail / dem Newsletter springen kann - also nicht wirklich etwas besonderes.

Es gibt einen Link mit dem Ziel einer ID.
Das Problem ist jetzt das diese Sprungmarken/Anchors unter iOS 8 im Standard Mail-Client nicht mehr funktionieren.
Ich glaube auch nicht, dass ich da viel tun kann, JavaScript geht ja eh nicht in Clients bzw. würde geblockt und eine andere Möglichkeit statt "id" nun "name" zu nehmen gibt es ja nicht. Gelesen habe ich nur dass z. B. in GMail noch ein Span um den Link hilft.

Wenn man danach sucht, findet man auch nur Beiträge die ins nichts führen wie z. B.:
https://discussions.apple.com/thread/6548063

Hab hier mal meine kleine Testseite falls es jemand probieren möchte:
http://jsfiddle.net/je74tb6y/

Der Inhalt ist natürlich quatsch aber es erfüllt seinen Zweck :p
Falls jemand noch eine Idee hat und mir helfen kann wäre ich sehr dankbar :)

HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Newsletter Demo</title>    
        <style type="text/css">        
            a {
                font: 16pt Arial, sans-serif;
                text-decoration: none;
            }
        
            a.based-link {
                display: block;
                margin-bottom: 100px;
                width: 480px;
                padding: 20px 0;
                background: gray;
            }
        
            .doge-ipsum {
              font-size: 14pt;
            }        
        
            .much-space-so-wow {
                margin-bottom: 900px;
            }
        </style>
    </head>
    <body>
        <a href="#anchorone" class="based-link">
            <span>Menü 1</span>    
        </a>

    
        <img src="http://placehold.it/1080x960" alt="placeholder 1">
        <pre class="doge-ipsum">
            wow.
             lorem ipsum.
            such HTML.    such generator.
   much HTML.       lorem generator.
   lorem dogescript.          so placeholder.
            very text.          so layout.
      such graphic.          so github.
       very typography.             many javascript.
     much generator.          lorem ipsum.
            many text.         very javascript.
  very graphic.   much placeholder.
     such github.       so HTML.
   so typography.          so layout.
       many github.           much generator.
     lorem layout.       much text.
  much placeholder.             so text.
  lorem doge.           so dogescript.
           so filler.   very doge.
         much github.         very typography.
     many generator.        such filler.
   so placeholder.          many graphic.
            such CSS.    much javascript.
         so dogescript.       lorem doge.
            many doge.     very doge.
         so typography.    many layout.
         such doge.   such github.
    lorem layout.          many HTML.
   much placeholder.         such doge.
    such ipsum.         so typography.
  many dogescript.      such ipsum.
             such CSS.       very filler.
     such dogescript.       much doge.
           very dogescript.            lorem doge.
            many graphic.   such graphic.
           such text.     many github.
       much javascript.             such dogescript.
        much javascript.         much javascript.
        much typography.         so javascript.
     much dogescript.        so filler.
   so layout.           much filler.
    very github.      much CSS.
         many placeholder.   much generator.
         much doge.    lorem CSS.
      many placeholder.         lorem doge.
         such javascript.  very dogescript.
            so CSS.           many layout.
    much ipsum.             many typography.
           very filler.    much placeholder.
          many doge.     very placeholder.
   such generator.      lorem javascript.
  much HTML.        lorem filler.
            many typography.
    
        </pre>
                   
        <a id="anchorone" class="based-link much-space-so-wow">Anchor</a>
    
        <pre class="doge-ipsum">
            wow.
             lorem ipsum.
            such HTML.    such generator.
   much HTML.       lorem generator.
   lorem dogescript.          so placeholder.
            very text.          so layout.
      such graphic.          so github.
       very typography.             many javascript.
     much generator.          lorem ipsum.
            many text.         very javascript.
  very graphic.   much placeholder.
     such github.       so HTML.
   so typography.          so layout.
       many github.           much generator.
     lorem layout.       much text.
  much placeholder.             so text.
  lorem doge.           so dogescript.
           so filler.   very doge.
         much github.         very typography.
     many generator.        such filler.
   so placeholder.          many graphic.
            such CSS.    much javascript.
         so dogescript.       lorem doge.
            many doge.     very doge.
         so typography.    many layout.
         such doge.   such github.
    lorem layout.          many HTML.
   much placeholder.         such doge.
    such ipsum.         so typography.
  many dogescript.      such ipsum.
             such CSS.       very filler.
     such dogescript.       much doge.
           very dogescript.            lorem doge.
            many graphic.   such graphic.
           such text.     many github.
       much javascript.             such dogescript.
        much javascript.         much javascript.
        much typography.         so javascript.
     much dogescript.        so filler.
   so layout.           much filler.
    very github.      much CSS.
         many placeholder.   much generator.
         much doge.    lorem CSS.
      many placeholder.         lorem doge.
         such javascript.  very dogescript.
            so CSS.           many layout.
    much ipsum.             many typography.
           very filler.    much placeholder.
          many doge.     very placeholder.
   such generator.      lorem javascript.
  much HTML.        lorem filler.
            many typography.
    
        </pre>
    </body>
</html>

So armselig das auch ist - du kannst nichts dagegen machen. So zumindest mein letzter Wissensstand.
Mittlerweile habe ich das Gefühl dass die Mail-Clients wieder schlechter werden.
 
So armselig das auch ist - du kannst nichts dagegen machen. So zumindest mein letzter Wissensstand.
Mittlerweile habe ich das Gefühl dass die Mail-Clients wieder schlechter werden.

Verdammt ^^ - ja armselig ist das wirklich :(
ich mein das ist ja nun wirklich so basic wie es nur sein kann und naja...

Na gut, dann gibt es wenigstens einen Forenbeitrag (auf Deutsch) den dann jemand finden kann und enttäuscht wieder geht, weil er hier auch keine Lösung findet :D ...
 
Werbung:
Zurück
Oben