調整大小Google noCAPTCHA reCAPTCHA

無論嘗試使用CSS還是CSS和javascript,似乎都無法改變驗證碼的外觀,原因它使用的是<iframe>嵌入你的網頁上。相對要去更改由Google外部加載的javascript和css文件生成的內容,事情將變得複雜。

是否有更簡單的方式實現RWD Google noCAPTCHA reCAPTCHA,通過使用CSS transform屬性,您可以更改reCAPTCHA的整個比例來實現寬度的更改。。

transform:scale(0.77);

CSS transform 實現 RWD

在您網站上加載reCAPTCHA外面包覆的區塊,或自己設定<div>,定義一個idclass。如下定義一個class="g-recaptcha":

<div class="g-recaptcha">
    <iframe>...</iframe> 
</div>

為了使reCAPTCHA與左上角對齊,將其設置transform-origin為使轉換從左上角開始,使用了transform-origin: 0 0。(transform-origin默認設置是從中心開始)

reCAPTCHA與左上角對齊RWD

然後你可以使用media查詢,設置不同寬度大小裝置,reCAPTCHA縮放的比例,去適合您的移動設備

@media screen and (max-height: 420px){
    .g-recaptcha {
        transform:scale(0.8);
        -webkit-transform:scale(0.8);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
    }
}
@media screen and (max-height: 320px){
    .g-recaptcha {
        transform:scale(0.77);
        -webkit-transform:scale(0.77);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
    }
}

參考文章:How to resize the Google noCAPTCHA reCAPTCHA

您也可能喜歡這些文章

SEO優化之CSS隱藏關鍵文字

想使用CSS將不必要,但可以增加SEO的關鍵文字隱藏,想要讓google大神搜尋到,又不想在網頁上HTML顯示你這些文字,可以使用下列CSS方法隱藏文字。...