Wersja mobilna strony Opcje

[darksiders94]

Witam,
Zastanawiam się jaki sposób na wykonanie wersji mobilnej strony jest najlepszy. Są skrypty php które wykrywają urządzenie. Tylko kiedy znalazłem taki skrypt to strona mobilna była na telefonie wyświetlana mimo wybrania opcji (na telefonie) PC. Odpuściłem.. Zabrałem się za Media Query. Tutaj postanowiłem rozpoznanie robić po orientacji, ponieważ telefony mają już wysokie rozdzielczości. Wszystko fajnie, ale strona była wyświetlana bez przybliżenia. Tzn container nie dopasował się do okna przeglądarki. Tak więc pytam, jaki sposób jest dobry i skuteczny?

[fate]

moim zdaniem lepsze jest responsive design niż wersja mobilna strony, mniej pracy, to ze Tobie sie kontener nie dopasoywał to nie wina media Query tylko Twojego kodu css

[michaf1994]

Użyj php i dodaj ciasteczka, oraz ?mobile=no itp. Jak znajdę kod to podam jakiego stosuję.

[PHP] pobierz, plaintext 
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
{
if($_GET['m']=='no' || ($_COOKIE['m']=='no' &&
$_GET['m']!='yes') ) {
setcookie('m', 'no');
}
else {
setcookie('m', 'yes');
$adres='mobile/';
 
$nagl='Location: '.$adres;
header($nagl);
};
};
?>
[PHP] pobierz, plaintext 

Ten post edytował michaf1994 7.08.2014, 19:05:52

[darksiders94]

Teraz jeszcze próbowałem z media query i zrobiłem po prostu wszystko duże. Tylko mi się to wydaje bez sensu.. Wcześniej jak zrobiłem to po prostu wyświetlała się strona z tym że mała i dopiero trzeba było sobie powiększyć widok. Chciałem, żeby wyświetlało się od razu dopasowane do okna więc dałem szerokość divom na 100% i wysokość powiększyłem kilka razy. Tak raczej nie powinno się robić.. Co zatem zrobić aby wyświetlało się prawidłowo bez powiększania divów?

[michaf1994]

Poczekaj. To też gdzieś mam żeby dopasowalo się do rozdziałki telefonu (IMG:style_emoticons/default/biggrin.gif)

[darksiders94]

Jeeejku Ty masz wszystko (IMG:style_emoticons/default/biggrin.gif)

[michaf1994]

Ja używam:


<meta name="viewport" content="width=device-width; initial-scale=1; user-scalable: no" />

a tu masz link do strony z artykułem z którego to brałem: Link do artykułu


Od kilku lat piszę strony i mam na pendrive trochę przykladów z ciekawymi rozwiązaniami. (IMG:style_emoticons/default/wink.gif)

[darksiders94]

Dzięki (IMG:style_emoticons/default/smile.gif) na bank sprawdzę te rozwiązania. Ja się zajmuję tym od roku i baaardzo dużo muszę się jeszcze nauczyć. Co ciekawsze rozwiązania również zachowuje (IMG:style_emoticons/default/biggrin.gif)

[michaf1994]

Mi to działa. Czasem się coś wysypie, ale to przez to, że moja mobilna wersja ma kilka iframek, więc na to trzeba uważać i poprawiać wyjątkami, ale bez iframe działa bez zarzutu.

[darksiders94]

Nooo w zasadzie wszystko ladnie pieknie. Tylko jest jeden mankament. Wykrywanie zrobilem po orientacji. Kiedy naciskam na pole formularza i wyskakuje klawiatura w telefonie to strona przelacza sie na tradycyjna. Co moze byc przyczyna?

[michaf1994]

podaj link to zobaczę, bo nie wiem o co Ci chodzi.

[darksiders94]

http://stronadwa.cba.pl/

[michaf1994]

U mnie na telefonie jest ok. Ten długi skrypt co Ci dałem wykrywa tez tablety (mojego napewno) i włącza na wersje komputerową. A ten efekt landscape fajny, ale troszkę u mnie się za bardzo poszerzyła strona. Tak jest jak telefon ma większą rozdzielczośc niż przeglądarka po powiększeniu, dlatego radziłbym zrobić szerokości % i dodać tą tą linijkę o autodopasowaniu i o braku powiększenia, bo trochę niewygodnie jest jak się powiększa sama strona.

Pomyśl też czy jeżdżące tło to dobry pomysł w przypadku mobilnej wersji, bo niestety zawsze tak jest, że przez chwilę widać białe tło.

A strona fajnie wykonana (IMG:style_emoticons/default/wink.gif) gratuluję oka do grafiki. (IMG:style_emoticons/default/smile.gif)

[darksiders94]

Jak to jezdzace tlo? Background mam fixed.

[michaf1994]

ten obrazek z ulicą w nocy i informacja o ciasteczkach jeżdżą. mogą być połączone i dlatego. jestem na telefonie teraz to Ci nie powiem, bo w źródło nie wejdę, ale jeżdżą razem.

[darksiders94]

Postanowiłem skorzystać z tego skryptu. Mam mały problem. Ten skrypt prowadzi do podkatalogu. Ja bym chciał, aby prowadził na subdomenę. Jak tego dokonać?

Albo w ogóle jest skrypt który prowadzi na subdomenę? Nie znam php i nie bardzo wiem jak go edytowac

[fate]

11 linijka na sztywno:

[PHP] pobierz, plaintext 
$adres='http://subdomena.domena.pl';
[PHP] pobierz, plaintext 

[darksiders94]

Wielkie dzięki (IMG:style_emoticons/default/smile.gif) wcześniej próbowałem z samym www ale i tak kierowało do folderu.

Jak usunąć z tego skryptu ciastko lub zmienić je tak aby zawsze przekierowywało?
Kiedy wchodzę na stronę to wszystko śmiga. Kieruje na stronę mobilną i po przełączeniu z powrotem. Lecz gdy już jestem na stronie mobilnej i wejdę na jakąś podstronę to już nie mogę wrócić na normalną wersję strony. Muszę wtedy usunąć m z adresu.
Pomożecie?