Tipy, jak opravit Windows Store Apps nefunguje správně ve Windows 10 a 8.1

Na mém webu Google Webmaster Tools říká, že spousta stránek má chyby kumulativního rozložení (CLS). Jinak známé jako trhané načítání.

Na mé stránce jsou obrázky vždy v divu s třídou, která ji nastavuje na procento bloku obsahu.

Např.

Birch by pond

Birch along a pond. In the landscape birch look good in random small clumps.


Vypočítaná šířka končí 281. (Ano, já vím. Měl bych používat srcsety.)

Snažil jsem se přidat skutečné rozměry obrazu pomocí width=900 height=1200. V této situaci stránka změní měřítko horizontální dimenze, ale ne vertikální.

Stránka webového vývojáře Google navrhuje vložení rozměrů. Zdá se, že text na této stránce i video naznačují, že by to fungovalo, ale nefunguje. To ale již stránku nenechává reagovat. Navrhují také použít rámečky aspektů CSS. Bohužel, CanIUse.com říká, že to není podporováno ŽÁDNÝM prohlížečem po vybalení z krabice.

Tento článek navrhuje následující:

img { aspect-ratio: attr(width) / attr(height);} 

Ale

Kontrola W3C CSS odpovídá:

img Property aspect-ratio doesn't exist : attr(width) / attr(height) 

Ale Mohu použít by naznačovalo, že poměr stran je podporován pouze částečně na firefoxu, experimentálním (musí povolit) v chromu a nikde jinde.

Něco mi tu chybí.

Jaký je nejlepší způsob, jak rezervovat prostor a snížit CLS na obrázcích s náhodnou velikostí na statické stránce?

Mohl jsem se usadit na malém počtu standardních velikostí. To by vyžadovalo, abych ručně změnil / změnil velikost každého obrázku, který používám. Pak by každá velikost, nebo spíše poměr velikosti měla definovanou vlastní třídu css. To je časově náročné. (Momentálně mám na svém webu 2300 obrázků.)

Upravit: V reakci na komentář je zde CSS a vypočítaný model z dotyčného prvku:

Vypočítaný model

  • „Zkusil jsem přidat skutečné rozměry obrázku s width = 900 height = 1200“ - Ve zdroji HTML? "V této situaci stránka mění měřítko horizontální dimenze, ale ne vertikální." - Závisí na tom, jaké CSS jste ve své třídě použili.
  • OK. Přidá do mého příspěvku popis css.

Myslím, že klíčová část, která vám chybí, je height: auto; v CSS.

Začátkem letošního roku provedly všechny hlavní prohlížeče změnu, při které berou šířku a výšku definovanou ve značce HTML img jako poměr stran obrázku. Nějaké pozadí zde

Chcete-li rezervovat správný prostor, musíte nejprve nastavit atributy šířky a výšky, jak jste již udělali. (Technicky to nemusí být skutečná velikost pixelu obrázku, ale nepoužívejte 1000px široký obrázek, pokud se nikdy nezobrazí tak velký.)

Pokud na obrázek nepoužijete žádný CSS, bude se zobrazovat přesně v rozměrech pixelu, které jste zadali, a prohlížeč si toto místo vyhradí během načítání obrázku.

Samozřejmě s responzivním designem bude obrázek často příliš velký. Nejlepší CSS k použití je toto:

img { max-width: 100%; height: auto; } 

Pokud je nyní nadřazený prvek (např. Sloupec) menší, obrázek se nebude zvětšovat větší a prohlížeč si stále vyhrazuje správné množství prostoru.

Pracoval pro vás: Charles Robertson | Chcete nás kontaktovat?