Pole "color" na smartfonie

Tworzę sobie pewną "aplikację" HTML+JS na własne potrzeby. Wykorzystuje ona wybór koloru, wykorzystuje <input type="color"> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color .

Na komputerze (Windows i Linux), w przeglądarce Chrome i Firefox działa tak, jak chciałem, czyli po kliknięciu kontrolki pojawia się systemowy wybieracz koloru i mogę wybrać zupełnie dowolny kolor (poprzez klikanie elementów wybieracza lub wpisanie wartości RGB, wybieracz sam pilnuje poprawności wpisanych wartości RGB).

Na smartfonie z Androidem też działa niby prawidłowo, ale mam jedno "ale". Testowałem na Chrome i Firefox i w obu przypadkach wybieracz umożliwia jedynie wybór jednego z ok. 20 kolorów. Np., chcę wskazać kolor konkretnie RGB(160, 190, 204), jak to zrobić?

Co zrobić w ustawieniach smartfona lub co podać w HTML (np. style, dodatkowe atrybuty), żeby móc wybierać dowolny kolor? Nie chodzi o implementację własnego wybieracza kolorów w JS, ani zamianę typu kontrolki na "text", bo nie po to w HTML5 wprowadzono kontrolkę typu "color", żeby samemu dorabiać wybieracz koloru lub posługiwać się kodami kolorów przyjętych w HTML samemu pilnując poprawności tych wartości.

Tego typu pola, tak samo jak np. chociażby wybór daty - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date <input type="date"> są obsługiwane przez przeglądarkę i to każda przeglądarka wybiera sobie, w jaki sposób obsłuży i wyświetli dany dialog.
Z tego co kojarzę, to nie mamy na to wpływu.
Jeśli chcesz uzyskać identyczny wygląd danego dialogu na wszystkich systemach i przeglądarkach, to chyba musisz skorzystać z jakichś zewnętrznych rozwiązań - czyli rzeczy w stylu https://jscolor.com/examples/. To oczywiście przykład, żeby wskazać dalszy kierunek poszukiwań. Przed chwilą sprawdziłem i u mnie na FF@Android wybór koloru wyświetlił się tak samo jak na desktopie.

Możesz też sam sobie taki wybieracz koloru napisać. Przed wprowadzeniem html5 ludzie też robili takie rzeczy :)

cerrato napisał(a):

Tego typu pola, tak samo jak np. chociażby wybór daty - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date <input type="date"> są obsługiwane przez przeglądarkę i to każda przeglądarka wybiera sobie, w jaki sposób obsłuży i wyświetli dany dialog.

Z tego co kojarzę, to nie mamy na to wpływu.
Jeśli chcesz uzyskać identyczny wygląd danego dialogu na wszystkich systemach i przeglądarkach, to chyba musisz skorzystać z jakichś zewnętrznych rozwiązań - czyli rzeczy w stylu https://jscolor.com/examples/. To oczywiście przykład, żeby wskazać dalszy kierunek poszukiwań.

Oczywiście, jest to jakieś wyjście i jakbym musiał, to bym sobie poradził. Jednak nie taki był cel założenia tego tematu.

cerrato napisał(a):

Przed chwilą sprawdziłem i u mnie na FF@Android wybór koloru wyświetlił się tak samo jak na desktopie.

Teraz ja też sprawdziłem na smartfonie i Chrome ma wybieracz teoretycznie dowolnego koloru, ale wybór jest tylko "na oko", są 3 suwaki, ale nawet nie pokazują się wybrane wartości. FF zainstalowałem przed chwilą z Google Play i tam była tylko paleta 10 kolorów, bez możliwości wskazania innego koloru.

Nie chodzi o wygląd dialogu, tylko o to, jakie ma możliwości wyboru. Na desktopie w Windows i Linux wygląda inaczej, ale w obu systemach mogę wpisać wartości RGB, a przy wyborze na oko pokazują się wartości klikniętego koloru.

wybieracz teoretycznie dowolnego koloru, ale wybór jest tylko "na oko", są 3 suwaki, ale nawet nie pokazują się wybrane wartośc

Pisałem, że to tylko wskazanie kierunku, dałem przykładowy wybieracz, ale takich w necie masz tysiące, więc na pewno znajdziesz coś, co będzie Tobie pasować. Ja jedynie chciałem podrzucić temat.

Na desktopie w Windows i Linux wygląda inaczej, ale w obu systemach mogę wpisać wartości RGB, a przy wyborze na oko pokazują się wartości klikniętego koloru.

Tak, jak pisałem - sposób implementacji i obsługi takiego selektora zależy od przeglądarki, więc skoro mobilne tak to wyświetlają a nie inaczej, to musisz to przyjąć na klatę. Nie spotkałem się z tym, żeby dało się to jakoś obejść. Po prostu - przeglądarka jedynie ma obowiązek, gdy napotka <input type="color"> wyświetlić okienko wyboru koloru. Ale jak ono będzie wyglądać to jedynie zależy od widzimisię twórców aplikacji.

cerrato napisał(a):

wybieracz teoretycznie dowolnego koloru, ale wybór jest tylko "na oko", są 3 suwaki, ale nawet nie pokazują się wybrane wartośc

Pisałem, że to tylko wskazanie kierunku, dałem przykładowy wybieracz, ale takich w necie masz tysiące, więc na pewno znajdziesz coś, co będzie Tobie pasować. Ja jedynie chciałem podrzucić temat.

Miałem na myśli nie ten, czy inny wybieracz w HTML/JS/CSS, bo jak sam piszesz, jest dużo gotowców, a mogę też zrobić jaki chcę i po temacie. Natomiast tutaj komentuję ten, który "zapewnia" przeglądarka Chromie w Androidzie dla standardowej kontrolki "color".

cerrato napisał(a):

Tak, jak pisałem - sposób implementacji i obsługi takiego selektora zależy od przeglądarki, więc skoro mobilne tak to wyświetlają a nie inaczej, to musisz to przyjąć na klatę.

Myślałem, że to tylko kwestia jakiś ustawień przeglądarki lub atrybutów bądź stylów kontrolki. Wygląda na to, że ani Google, ani Mozilla się nie postarał (innych przeglądarek mobilnych nawet nie sprawdzałem, bo nie o to mi chodzi) i albo przyjmę to na klatę tak, jak jest, albo zrobię własny, niestandardowy wybieracz (lub wrzucę gotowca HTML/JS/CSS).

Wygląda na to, że ani Google, ani Mozilla się nie postarał

Raczej zastanowili się nad tym, co jest realnie potrzebne.
O ile na desktopie możesz wykonać bardzo szczegółowy wybór, to na komórce coś takiego by się nie sprawdziło. Na mobilkach nie ma potrzeby, żeby wybrać jeden spośród 50 odcieni czerwonego - więc po prostu wybierasz czerwony albo niebieski. Za to masz to ładnie podane w prostym do obsługi dotykiem interface.
OK, może Ciebie to wkurza, ale za to 95% osób by się irytowało, że ma paletę do wybierania i muszą sobie tam jakieś suwaczki przesuwać, albo że mają obrazek z tęczą na 1/4 ekranu i muszą sobie palcem wskazywać jakiś odcień.

Pamiętaj, że wersja mobilna nie powinna być klonem wersji desktopowej, bo inne osoby, mające inne potrzeby, będą z tego korzystać w zupełnie inny sposób.

cerrato napisał(a):

po prostu wybierasz czerwony albo niebieski. Za to masz to ładnie podane w prostym do obsługi dotykiem interface.
OK, może Ciebie to wkurza, ale za to 95% osób by się irytowało, że ma paletę do wybierania i muszą sobie tam jakieś suwaczki przesuwać, albo że mają obrazek z tęczą na 1/4 ekranu i muszą sobie palcem wskazywać jakiś odcień.

W takim razie temat uważam za wyczerpany. Wygląda na to, że ja jestem z tych 5% lub moja aplikacja to jeden z bardzo niewielu przypadków, w których ma znaczenie, czy kolor jest jakiś tam czerwony lub jakiś tam niebieski, czy #FF0000 lub #0000FF.

Pamiętaj, że wersja mobilna nie powinna być klonem wersji desktopowej, bo inne osoby, mające inne potrzeby, będą z tego korzystać w zupełnie inny sposób.

Myślałem, że Responsive Web Design, który stał się popularny, jest ideą jednej i tej samej aplikacji dla desktopa i mobila, z tą samą funkcjonalnością, tylko układ elementów dostosowuje się do wielkości ekranu.

Myślałem, że Responsive Web Design, który stał się popularny, jest ideą jednej i tej samej aplikacji dla desktopa i mobila, z tą samą funkcjonalnością, tylko układ elementów dostosowuje się do wielkości ekranu.

Może inaczej - jeśli chodzi o sam kod, to RWD jest tą samą stroną, ale jest ona całkowicie inaczej ostylowana, przez co nieraz jej układ się potrafi diametralnie zmieniać. Chociażby - podczas zmieniania nie tylko się skaluje szerokość div'ów, ale jeszcze mamy zmianę rozmiaru czcionki, niektóre elementy (np. pasek menu na górze) się skalują, a potem całkowicie zmieniają w hamburgera, nieraz niektóre elementy w ogóle nie są wyświetlane w niektórych widokach. Przykład pierwszy z brzegu - zobacz, jak wygląda 4P na desktopie oraz na komórce. Niby ta sama strona, ale układ całkowicie inny, inne treści także są pokazywane.

andrzejlisek napisał(a):

Myślałem, że Responsive Web Design, który stał się popularny, jest ideą jednej i tej samej aplikacji dla desktopa i mobila, z tą samą funkcjonalnością, tylko układ elementów dostosowuje się do wielkości ekranu.

Tak często faktycznie bywa, ale to nie jest wcale dobry wzorzec projektowy. Teoretycznie wszyscy dostają to samo, więc mogą przenosić nawyki ze smartfona na deskotp, ale w praktyce oznacza to zwyczajnie równanie w dół. Dobrymi przykładami są tutaj np. Windows 8 i jego próba likwidacji menu start w imię powszechnego machania paluchem albo irytująca konsoloza interfejsów współczesnych gier, które za cholerę nie potrafią wykorzystać możliwości jakie oferuje mysz i klawiatura.

Hasło "wszystkim po równo" testowano już za poprzedniego systemu, i wtedy też się nie sprawdziło :)